typescript Angular2 异常：无法绑定到“ngStyle”，因为它不是已知的本机属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36503654/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular2 Exception: Can't bind to 'ngStyle' since it isn't a known native property
提问by Marcel J?stingmeier
I have done a lot of work with the new Angular2 Framework recently. While testing out some of the features, I ended up with the error:
我最近在新的 Angular2 框架方面做了很多工作。在测试某些功能时，我最终遇到了错误：
Can't bind to 'ngStyle' since it isn't a known native property
Can't bind to 'ngStyle' since it isn't a known native property
While investigating the error itself I came to several solutions, like adding the 'directive: [NgStyle]' to the component, but this does not solve the problem.
在调查错误本身时，我找到了几种解决方案，例如向组件添加“指令：[NgStyle]”，但这并不能解决问题。
The code is like following:
代码如下：
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
按钮.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'
}
}
}
Thank you for your help.
谢谢您的帮助。
回答by codef0rmer
That happens when you do not import the CommonModulemodule. In the recent version of Angular, all DOM level directives are grouped under the same module.
当您不导入CommonModule模块时会发生这种情况。在最新版本的 Angular 中，所有 DOM 级别的指令都归入同一模块下。
import { CommonModule } from '@angular/common';
You can import NgClassor NgStyleindividually but Angular soon throws an error if you end up using the same in multiple components accessed via router.
您可以导入NgClass或NgStyle单独导入，但如果您最终在通过路由器访问的多个组件中使用相同的组件，Angular 很快就会抛出错误。
回答by Günter Z?chbauer
If you need full flexibility, over what host provides
如果您需要完全的灵活性，那么主机提供的
host: {
'[class.someName]':'someValue',
'[style.someProp]':'someValue'
}
you need to use imperative ways like
你需要使用命令式的方式，比如
@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());
}
}
or other methods Rendererprovides.
或Renderer提供的其他方法。
回答by Marcel J?stingmeier
Please note, i have found a solution, while writing this question. And i like to share it, so that other people do not have to search an eternity.
请注意，我在写这个问题时找到了一个解决方案。我喜欢分享它，这样其他人就不必寻找永恒。
Please take a look at the following link:
请查看以下链接：
Angular2 Exception: ngClass within a Host, "isn't a known native property"
As 'Günter Z?chbauer' describes, it is not possible to use directives in host bindings. And he comes with a solution for ngClass.
正如'Günter Z?chbauer' 所描述的，不可能在主机绑定中使用指令。他为 ngClass 提供了一个解决方案。
And here is a simple solution for my problem:
这是我的问题的简单解决方案：
button.ts
按钮.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, '');
}
}
Note, that this is not a perfect solution because it lacks while 'compiling' the object to plain css. I simply replace all occurences of ' " ' which results in an odd behaviour when using 'url(" "), ...'. Hope that i could help somebody with the same or a similar question.
请注意，这不是一个完美的解决方案，因为它在将对象“编译”为纯 css 时缺少它。我只是替换了所有出现的 ' " '，这会在使用 'url(" "), ...' 时导致奇怪的行为。希望我可以帮助有相同或类似问题的人。
回答by George C.
If someone gets this error on unit testing with karma.
如果有人在使用业力进行单元测试时遇到此错误。
I was getting this error with Karma testing. I solve this by importing FlexLayoutModule
我在 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();
});
});
I hope someone helped with this answer.
我希望有人帮助回答这个问题。
