Angular2 예외:알려진 기본 속성이 아니므로 'ngStyle'에 바인딩할 수 없습니다.

Angular2 예외:알려진 기본 속성이 아니므로 'ngStyle'에 바인딩할 수 없습니다.

저는 최근에 새로운 Angular2 Framework로 많은 일을 했습니다.일부 기능을 테스트하는 동안 다음과 같은 오류가 발생했습니다.

Can't bind to 'ngStyle' since it isn't a known native property

오류 자체를 조사하는 동안 'direction: [NgStyle]'을 구성 요소에 추가하는 등 몇 가지 해결책을 찾았지만, 이 방법으로는 문제가 해결되지 않습니다.

코드는 다음과 같습니다.

메인.ts

import {bootstrap} from 'angular2/platform/browser';
import {App} from './app'

bootstrap(App).then(error => console.log(error));

앱.ts

import { Component } from 'angular2/core';
import { Button } from './button';
import { NgStyle } from "angular2/common";

@Component({
    selector: 'app',
    template: '<h1>My First Angular 2 App</h1><button>Hello World</button>',
    directives: [Button, NgStyle]
})
export class App { }

단추

import {Component} from "angular2/core";
import {NgStyle} from "angular2/common";

@Component({
    selector: 'button',
    host: {
        '[ngStyle]': 'style()'
    },
    templateUrl: '<ng-content></ng-content>',
    directives: [NgStyle]
})
export class Button {
    style() {
        return {
            'background': 'red'
        }
    }
}

도와주셔서 고맙습니다.

모듈을 가져오지 않을 때 발생합니다.Angular의 최신 버전에서는 모든 DOM 레벨 디렉티브가 동일한 모듈 아래 그룹화됩니다.

import { CommonModule } from '@angular/common';

또는 개별적으로 가져올 수 있지만 라우터를 통해 액세스하는 여러 구성 요소에서 동일한 것을 사용하게 되면 Angular는 곧 오류를 발생시킵니다.

완전한 유연성이 필요한 경우 호스트가 제공하는 기능을 통해

host: {
  '[class.someName]':'someValue',
  '[style.someProp]':'someValue'
}

당신은 다음과 같은 명령적인 방법을 사용할 필요가 있습니다.

@Component({ ... }) 
export class SomeComponent {
  constructor(private renderer:Renderer, private elementRef:ElementRef) {}
  someMethod() {
    this.renderer.setElementClass(
        this.elementRef.nativeElement, this.getClassFromSomewhere());
    this.renderer.setElementStyle(
        this.element.nativeElement, 'background-color', this.getColor());
  }
}

렌더러가 제공하는 다른 방법.

이 질문을 작성하는 동안 해결책을 찾았습니다.그리고 저는 그것을 공유하는 것을 좋아합니다. 그래서 다른 사람들은 영원히 찾을 필요가 없습니다.

다음 링크를 참조하십시오.

Angular2 예외: 호스트 내의 ngClass, "알려진 네이티브 속성이 아닙니다."

'Günter Zöchbauer'가 설명한 것처럼 호스트 바인딩에는 지시어를 사용할 수 없습니다.그리고 그는 ngClass를 위한 솔루션을 제공합니다.

제 문제에 대한 간단한 해결책은 다음과 같습니다.

단추

import {Component} from "angular2/core";
import {NgStyle} from "angular2/common";

@Component({
    selector: 'button',
    host: {
        '[style]': 'styleAsString()'
    },
    templateUrl: 'app/button.html',
    directives: [NgStyle]
})
export class Button {
    styleAsString() {
        let style = {
            background: 'red'
        };

        return JSON.stringify(style).replace('{', '').replace('}', '').replace(/"/g, '');
    }
}

이것은 객체를 플레인 CSS로 '컴파일'하는 동안 부족하기 때문에 완벽한 솔루션이 아닙니다.저는 단순히 'url(" "), ...'을 사용할 때 이상한 행동을 일으키는 '"의 모든 발생을 대체합니다.제가 누군가에게 같은 질문이나 비슷한 질문을 할 수 있기를 바랍니다.

카르마를 사용한 유닛 테스트에서 이 오류가 발생할 경우.

저는 카르마 테스트에서 이 오류를 얻었습니다.FlexLayoutModule을 가져옴으로써 이 문제를 해결합니다.

예

import { MaterialModule } from '@app-modules/material.module.ts';
import { FlexLayoutModule } from '@angular/flex-layout';
import { DashboardComponent } from './dashboard.component';

describe('DashboardComponent', () => {
  let component: DashboardComponent;
  let fixture: ComponentFixture<DashboardComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ MaterialModule, FlexLayoutModule ],
      declarations: [
        DashboardComponent
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(DashboardComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

누군가가 이 답변을 도와줬기를 바랍니다.

언급URL : https://stackoverflow.com/questions/36503654/angular2-exception-cant-bind-to-ngstyle-since-it-isnt-a-known-native-proper