Question

我正在学习Angular 6，并且在学习如何将数据从父组件传递到子组件时，结果表明我们应该在子组件中添加Input（）属性，父组件将填充该属性。

我的问题是，如果我只是要创建一个具有诸如elementId之类的属性的组件，那么它将在使用元素时进行设置。它不会从另一个组件传递进去，而是像这样硬编码：

<my-component elementId='xyz'>

我看到的指南是在组件中创建那个elementId作为Input（）。我以为以前阅读的指南从未做到这一点，它只是在组件类中声明为常规属性，而没有Input（）

是否始终需要Input（），还是仅在将数据从父级传递到子级时？

我已经包含了作者使用的代码：

import { Component, OnInit, Input } from '@angular/core';
import { Title } from '@angular/platform-browser';

@Component({
  selector: 'simple-modal',
  templateUrl: './simple-modal.component.html',
  styleUrls: ['./simple-modal.component.css']
})
export class SimpleModalComponent implements OnInit {
  @Input() title: string;
  @Input() elementId: string;

  constructor() { }

  ngOnInit() {
  }

  closeModal() {

  }

}

组件在另一个组件中的使用方式为：

<simple-modal elementId="searchResults" title="Matching Sessions">
  <div class="list-group">
    <a class="list-group-item" *ngFor="let session of foundSessions" [routerLink]="['/events', session.eventId]">{{session.name}}</a>
  </div>
</simple-modal>

Answer 1

Input允许您在模板中进行绑定（以HTML标记，而不是以OOP方式）。它们以异步方式更新，更新此类输入将调用onChange回调。您不能通过简单的属性来做到这一点。

编辑：

出于好奇，我已经检查了您的陈述，答案是否定的，它不会被设定。 https://stackblitz.com/edit/angular-xtkgt4

Answer 2

在这种情况下，答案之一就是“因为文档就是这样说的。”

Angular需要Input()指令来将模板绑定到组件属性。 Angular不会在“硬编码”值和动态值之间进行区分。如果要从模板父级提供子组件的值，则必须使用Input()装饰器。

坦率地说，即使没有Input()装饰器也能脱身，这几乎肯定是编程错误，并且是可怕的设计实践。

Answer 3

@Input装饰器将为属性创建绑定（在您的情况下为elementId），因此将在每个更改检测周期中对其进行检查。

如果您的属性永远不会改变，则有另一种选择：@Attribute装饰器，只能读取一次。

您可以通过以下方式使用它：

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

@Component({
  selector: 'my-component',
  template: `<label>{{ elementId }}</label>`
})
export class MyComponent {
  constructor(@Attribute('elementId') public elementId: string) { }
}

组件和Input（）设置属性

3 个答案: