Angular @input装饰器

Question

你好那里学习角度并且遇到角度的@input装饰者。在研究了这个主题后，我仍然难以理解这个概念。

代码：

app.component.html：

<app-tutorials [bar]="foo"></app-tutorials>

app.component.ts：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  foo = {
    name: 'willem',
  }
}

tutorial.component.html：

<p>{{bar.name}}</p>

tutorial.component.ts：

import { Component, OnInit, Input} from '@angular/core';

@Component({
  selector: 'app-tutorials',
  templateUrl: './tutorials.component.html',
  styleUrls: ['./tutorials.component.css']
})
export class TutorialsComponent{
  @Input() bar
}

问题：

我目前的理解是否正确？此外，如果您在回答我已经忽略或可能对此主题有帮助的事情中有其他信息，我将非常感激。

• @input用于仅将数据从父组件传输到子组件。
• 我们使用属性绑定：<app-tutorials [bar]="foo"></app-tutorials>来传递app-tutorials组件中foo的数据。
• 然后，我们可以使用@input在tutorials.component.ts文件中使用此数据。
• 使用字符串插值，我们只能从自己的ts文件绑定变量，但由于我们现在使用了@input，我们也可以在此HTML模板中使用它。