Question

我在呈现component+template时从angular2收到此消息：

无法绑定到'type'，因为它不是'alert'的已知属性。

我创建了这个组件：

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元素的默认attr（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>

angular2：找不到属性绑定

1 个答案: