angular 4.0 定义输入属性

最新推荐文章于 2024-08-12 22:57:15 发布

1322300062

最新推荐文章于 2024-08-12 22:57:15 发布

阅读量531

点赞数

angular 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一个使用Angular框架创建的自定义指令GreetDirective。通过Input装饰器定义指令的输入属性，使用户能够自定义HTML元素的显示内容。具体实现包括了如何在组件中应用此指令来展示个性化的问候信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载自 http://www.ngui.cc/news/show-127.html

为了能够让用户自定义 GreetDirective 指令的问候内容，我们需要使用 Input 装饰器去定义指令的输入属性。

指令的作用

该指令用于演示如何利用 Input 装饰器，定义指令的输入属性，从而实现让用户自定义问候内容。

指令的实现

import { Directive, HostBinding, Input } from '@angular/core'; 
@Directive({
    selector: '[greet]' }) export class GreetDirective { 
 @Input() greet: string; 
 @HostBinding() get innerText() { return this.greet;
    }
}

指令的应用

import { Component } from '@angular/core'; 
@Component({
  selector: 'app-root',
  template: `
    <h2>Hello, Angular</h2>
    <h2 [greet]="'Hello, Semlinker!'">Hello, Angular</h2>
  `,
}) 
export class AppComponent { }