首页 文章

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

提问于
浏览 次
3

是否可以在主机中使用“ngClass”作为组件/指令 .

@Component({
        selector: 'custom',
        template: `<div [ngClass]="classMap"></div> // I work
        <ng-content></ng-content>`,
        host: {
            '[ngClass]' : 'classMap' // I don't work!!!
        }
    })
    export class CustomComponent {
        constructor () {
            this.classMap = {
                custom: true
            };
        }
    }

在上面的例子中，ngClass在模板中的div上正常工作..它得到了一个“自定义”类，但在尝试将via添加到Host时会引发异常 .

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

直接在主机中设置类可以正常工作，例如;

host: {
    '[class.custom]' : 'classMap.custom'
}

因此会认为ngClass会好吗？语法不正确？ （可能!!!）:)

angular ng-class

2 回答

  • 4

    ngClass 是一个指令，主机绑定不支持指令 .

    host: {
        '[ngClass]' : 'classMap' // I don't work!!!
    }

    需要的是

    host: {
        '[class.className]' : 'className', 
        '[class]' : 'classNames' 
    }

    其中 classNames 是以空格分隔的类列表 .

    回复于
  • -1

    我有同样的问题，但我可以解决它导入我的模块上的一些模块：

    import { RouterModule, Routes }   from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {KSSwiperModule} from 'angular2-swiper';

import { DashboardComponent }     from './dashboard.component';
import {SwiperComponent} from "./swiper.component";

const routes: Routes =  [
  { path: 'dashboard',  component: DashboardComponent },
];

@NgModule({
  imports:      [
    RouterModule.forChild(routes),
    KSSwiperModule,
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  declarations: [ DashboardComponent, SwiperComponent ]
})
export class DashboardModule { }

    我的组件不使用“主机”：

    import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  moduleId: "dashboard",
  selector: 'app-dashboard',
  templateUrl: 'dashboard.component.html',
  styleUrls: [ 'dashboard.component.scss' ],
  encapsulation: ViewEncapsulation.None
})
export class DashboardComponent {
  public isLandingHidden: boolean;

  showReasons() {
    this.isLandingHidden = true;
  }
}
    回复于

相关问题