angular2：未找到属性绑定

Question

当 component+template 被渲染时，我从 angular2 收到这条消息：

无法绑定到“类型”，因为它不是“警报”的已知属性。

我已经创建了这个组件：

interface Alert {
    type: string;
    msg: string;
}

@Component({
  selector: 'signin',
  styleUrls: [ './signin.style.scss' ],
  templateUrl: './signin.template.html',
  encapsulation: ViewEncapsulation.None,
  host: {
    class: 'signin-page app'
  }
})
export class Signin implements OnInit {

    private form:FormGroup;
    private alerts: Array<Alert>;

    constructor(private fb: FormBuilder, private commty: UsersService) {}

    ngOnInit():void {
        //...
    }

    private addAlert(message: string): void {
        this.alerts.push({type: 'danger', msg: message});
    }

    public closeAlert(index): void {
        this.alerts.splice(index, 1);
    };
}

相关的html模板代码为：

<alert *ngFor="let alert of alerts; let i = index" [type]="alert.type + ' alert-sm'" (close)="closeAlert(i)" dismissible="true">
    <div [innerHTML]="alert.msg"></div>
</alert>

Answer 1

type不是html dom元素的默认属性(alert dom是shadow dom)

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM

<alert *ngFor="let alert of alerts; let i = index" [attr.type]="alert.type + ' alert-sm'" (close)="closeAlert(i)" dismissible="true">
    <div [innerHTML]="alert.msg"></div>
</alert>