20

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

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

在调查错误本身时，我找到了几种解决方案，例如将“指令：[NgStyle]”添加到组件中，但这并不能解决问题。

代码如下：

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

按钮.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'
        }
    }
}

谢谢您的帮助。

4

4 回答 4

53

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

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

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

于 2016-11-13T16:43:45.520 回答
5

如果您需要完全的灵活性，则取决于主机提供的内容

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

或渲染器提供的其他方法。

于 2016-04-08T15:41:26.483 回答
2

请注意，我在写这个问题时找到了解决方案。我喜欢分享它，这样其他人就不必寻找永恒。

请查看以下链接：

Angular2异常：主机中的ngClass，“不是已知的本机属性”

正如“Günter Zöchbauer”所描述的，不可能在主机绑定中使用指令。他为 ngClass 提供了一个解决方案。

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

按钮.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(" "), ...' 时导致奇怪的行为。希望我可以帮助有相同或类似问题的人。

于 2016-04-08T15:33:57.630 回答
2

如果有人在使用 karma 进行单元测试时遇到此错误。

我在使用 Karma 测试时遇到了这个错误。我通过导入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();
  });
});

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

于 2018-09-13T09:36:18.067 回答