Angular 9 - 指令，如何从组件中读取属性_编程开发

Angular 9 - 指令，如何从组件中读取属性

创始人

2024-10-18 06:30:31

0次

要从Angular 9组件中读取属性，可以使用@Input装饰器将属性注入到组件中。下面是一个示例：

在组件类中定义属性，并使用@Input装饰器将其注入到组件中。

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

@Component({
  selector: 'app-my-component',
  template: `
    
      {{ title }}
      {{ content }}
    
  `
})
export class MyComponent {
  @Input() title: string;
  @Input() content: string;
}

在父组件中使用元素，并通过属性绑定将属性值传递给子组件。

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

@Component({
  selector: 'app-parent-component',
  template: `
    
  `
})
export class ParentComponent {
  myTitle = 'Hello';
  myContent = 'World';
}

在上面的示例中，父组件通过属性绑定将myTitle和myContent的值传递给子组件的title和content属性。

这样，子组件就可以读取并在模板中使用父组件传递的属性值。

上一篇：Angular 9 - 找不到组件<component>的工厂

下一篇：Angular 9 - 重定向到相同的URL并刷新页面，但只应调用当前页面的API调用。

Angular 9 - 指令，如何从组件中读取属性

{{ title }}

相关内容

热门资讯