angular - 从 Angular 组件选择器获取内部文本

Question

我正在构建一个 Angular 消息组件:

<app-info-card>
  my message here
</app-info-card>

这是我的组件:

import {AfterViewInit, Component, ContentChild, ElementRef, Input, OnInit} from '@angular/core';

@Component({
  selector: 'app-info-card',
  templateUrl: './info-card.component.html',
  styleUrls: ['./info-card.component.css']
})
export class InfoCardComponent implements OnInit, AfterViewInit {

  @ContentChild('app-info-card') messageRef: ElementRef;
  message: string;

  constructor() {
  }

  ngOnInit() {
  }

  ngAfterViewInit() {

    this.message = this.messageRef.nativeElement.innerHTML;
    console.log(this.messageRef.nativeElement.innerHTML);

  }

}

这给了我一个错误，messageRef 未定义。我试图从组件选择器“我的消息”中获取内部文本到组件的消息字段中。有没有一种方法可以在不添加属性的情况下做到这一点？

Answer 1

根据您的回答，您需要将该消息传递到您的子组件中。有不同的方法，看看https://angular.io/guide/component-interaction

在这种情况下，我建议您使用输入绑定(bind)。 要么在你的父模板中使用一个变量

<app-info-card [message]="message"></app-info-card>

在你定义的相应组件中的什么地方

private message: string = 'my message here';

或者直接如果它不是动态的(可能不是这种情况)

<app-info-card [message]="'my message here'"></app-info-card>

注意'里面

在你的子组件中使用这两种方式，这样说:

export class InfoCardComponent implements OnInit {

    @Input('message') message: string;

    ngOnInit() {
        // do whatever other stuff you want
    }

}

您可能还想实现 OnChanges。如果您还有其他问题，请告诉我。

一种替代方法是使用内容投影。

<app-info-card>my message here</app-info-card>

在卡片的模板中，即

<div class="card">
    <ng-content></ng-content>
</div>