angular - 将参数传递给组件。是否使用括号

Question

在 Angular 6 中有以下组件:

export class HeaderComponent implements OnInit {

  @Input() type: string;

  constructor() { }

  ngOnInit() {

}

组件的 HTML 如下:

<h1>Title</h1>

<p *ngIf="type=='admin'">Admin Message</p>

我使用的组件如下:

<header [type]="admin"></header>    

除非我删除类型周围的括号，否则消息不会显示:

<header type="admin"></header>    

我错过了什么？

Answer 1

• 没有括号，该值被视为字符串常量

    prop1="val1" // the string "val1" is assigned to prop1

• 括号内的值是被求值的表达式

    [prop1]="val1"   // the value of the class property val1 is assigned to prop1
    [prop1]="val1()" // the value returned by the method val1() is assigned to prop1
    [prop1]="'val1'" // the string "val1" is assigned to prop1
    [prop1]="condition ? val1() : 'val2'" // the result is assigned to prop1

---

从 Angular documentation :

Remember the brackets

The brackets tell Angular to evaluate thetemplate expression. If you omit the brackets, Angular treats thestring as a constant and initializes the target property with thatstring. It does not evaluate the string!