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>    

我遗漏了什么？

在这一行：

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

Admin被认为是父组件的属性，而不是字符串值。您想要的是将其作为字符串传递，因此您可以说：

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

在这行中：

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

Admin被认为是父组件的属性，而不是字符串值。您想要的是将其作为字符串传递，因此您可以说：

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

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

• 带括号的值是一个要计算的表达式

---

从角度来看：

记住括号

括号告诉Angular如何计算 模板表达式。如果省略括号，Angular将处理 字符串作为常量，并使用该字符串初始化目标属性 一串它不会对字符串求值

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

• 带括号的值是一个要计算的表达式

---

从角度来看：

记住括号

括号告诉Angular如何计算 模板表达式。如果省略括号，Angular将处理 字符串作为常量，并使用该字符串初始化目标属性 一串它不会对字符串求值

---

如果您想从中传递硬代码字符串，那么它应该是

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

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

hero.component.ts

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

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

hero.component.ts
导出类组件{
admin:string=“管理员”；
}

如果要传递硬代码字符串，则应

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

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

hero.component.ts

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

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

hero.component.ts
导出类组件{
admin:string=“管理员”；
}

使用

[type]

时，值必须是表达式。要使其像那样工作，您需要

[type]=“'admin'

（注意使其成为字符串的

”

）。当您使用

[type]=“admin”

时，您要求Angular在宿主组件上查找

admin

属性并使用其值。@KirkLarkin我明白了。但是我应该使用[type]=“admin”还是type=“admin”。我的意思是两者都有用。使用其中一种会有什么后果？我不知道…当您使用

[type]

时，值必须是表达式。要使其像那样工作，您需要

[type]=“'admin'

（注意使其成为字符串的

”

）。当您使用

[type]=“admin”

时，您要求Angular在宿主组件上查找

admin

属性并使用其值。@KirkLarkin我明白了。但是我应该使用[type]=“admin”还是type=“admin”。我的意思是两者都有用。使用其中一种会有什么后果？我很想念。。。