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

从角度documentation：

记住括号

方括号告诉Angular评估   模板表达式。如果省略括号，Angular将   字符串作为常量，并使用该常量初始化target属性   串。它不评估字符串！

Answer 2

如果您要从中传递硬编码字符串，则应该为

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

但是，如果值admin是component.ts文件中的变量，那么在这种情况下，您应该编写

hero.component.ts

export class HeroComponent {
    admin: string = "Administrator";
}

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

Answer 3

在这一行：

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

管理员被认为是父组件的属性，而不是字符串值。您想要的是将其作为字符串传递，所以您应该说：

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

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

3 个答案: