要在Angular 5中传递值给属性,可以使用属性绑定或者通过组件属性进行传递。
在组件的.ts文件中,声明一个名为title的输入属性,并在组件类中使用@Input装饰器:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-component',
templateUrl: './component.component.html',
styleUrls: ['./component.component.css']
})
export class ComponentComponent {
@Input() title: string;
}
现在,属性绑定将会将message的值传递给组件的title属性。
在父组件的.ts文件中,使用ViewChild装饰器来获取子组件的实例,并设置其属性:
import { Component, ViewChild } from '@angular/core';
import { ComponentComponent } from './component.component';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
@ViewChild('childComponent') childComponent: ComponentComponent;
setMessage() {
this.childComponent.title = "Hello World";
}
}
通过调用setMessage()
方法,可以将值"Hello World"传递给子组件的title属性。
这些是在Angular 5中传递值给属性的两种解决方法。您可以根据自己的需求选择其中一种。