如何为Angular 2组件属性设置默认值

在Angular 2中，我们可以使用Input装饰器在两个组件之间（从父到子）传递一个变量的值。使用这些输入装饰器，我们也可以设置属性的默认值。下面我以一种全面的方式详细阐述了如何为Angular 2组件设置默认值。

语法:

@Input() PropertyName = Default Value  /* @Input country = 'India' */

步骤:

• 首先根据要求对.html文件进行编码。
• 然后在子组件中包含默认属性。
• 现在使用@Input()装饰器用默认值初始化该属性。
• 我们还应该从’@angular/core’导入输入装饰器。
• 一旦初始化完成，在HTML文件中使用该属性在浏览器中显示。

导入的语法：

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

按代码实现：
app.component.html:

<p>Welcome to GeeksforGeeks </p>
<app-child [country] = "countryName"></app-child>

app.component.ts:

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor() { }
  ngOnInit() {}
  countryName = 'India';
}

child.component.ts:

import { Component, Input, OnInit} from '@angular/core';
  
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent implements OnInit {
  constructor() { }
  ngOnInit() {}
    
  @Input() country = 'Australia';
  @Input() capital = 'New Delhi';
  
}

child.component.html:

<p> Country is : {{country}} </p>
<p> Capital is : {{capital}} </p>

结论:
由于我们传递的国家属性是 “印度”，它将被显示。但是当它涉及到资本时，由于我们没有传递任何值，它在child.component.ts文件中显示默认值。

输出: