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

在Angular 2中，我们可以使用Input Decorator在两个组件之间(从父级到子级)传递变量的值。使用这些Input装饰器，我们还可以设置属性的默认值。下面，我以全面的方式详细介绍了如何为Angular 2组件设置默认值。

句法：

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

方法：

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

导入语法：

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

通过代码实现：
app.component.html：

Welcome to GeeksforGeeks 

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：

 Country is : {{country}} 
 Capital is : {{capital}} 

结论：
当我们将国家/地区属性传递为“印度”时，将显示该属性。但是当涉及到资本时，因为我们没有传递任何值，它会在child.component.ts文件中显示默认值。

输出：