Angular2异常：无法绑定到'ngStyle'，因为它不是已知的本机属性

Question

我最近使用新的Angular2框架做了很多工作。在测试一些功能时，我最终得到了错误：

无法绑定到'ngStyle'，因为它不是已知的本机属性

在调查错误本身时，我遇到了几个解决方案，比如在组件中添加'directive：[NgStyle]'，但这并没有解决问题。

代码如下：

main.ts

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

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

app.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 { }

button.ts

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'
        }
    }
}

谢谢您的帮助。

Answer 1

当您不导入CommonModule模块时会发生这种情况。在最新版本的Angular中，所有DOM级别指令都归入同一模块下。

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

您可以单独导入NgClass或NgStyle，但如果最终在通过路由器访问的多个组件中使用相同的，Angular很快就会抛出错误。

Answer 2

如果您需要完全的灵活性，请通过主机提供

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());
  }
}

或Renderer提供的其他方法。

Answer 3

请注意，我在撰写此问题时找到了解决方案。而且我喜欢分享它，以便其他人不必寻找永恒。

请看一下以下链接：

Angular2 Exception: ngClass within a Host, "isn't a known native property"

正如'GünterZöchbauer'所描述的那样，不可能在主机绑定中使用指令。他为ngClass提供了解决方案。

这是我的问题的简单解决方案：

button.ts

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（“”），...时会导致奇怪的行为。希望我可以帮助有相同或类似问题的人。

Answer 4

如果有人在业力单位测试中得到此错误。

我通过Karma测试得到了这个错误。我通过导入FlexLayoutModule来解决这个问题

example

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();
  });
});

我希望有人帮助这个答案。