Angular4中如何绑定组件选择器显示动态字符串数据

Question

我在我的应用程序中使用 angular 4，我想使用一个可重用的组件来帮助我根据用户动态显示一些信息。因此，作为第一步，我创建了组件！

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

@Component({
  selector: 'pageInfo',
  templateUrl: './pageInfo.component.html',
  styleUrls: ['./pageInfo.component.scss']
})
export class PageInfoComponent implements OnInit {


  public info: string;
  public manipulatedString: string;

  constructor() {
  }

  ngOnInit() {
  }

  stringManipulation(){

    this.manipulatedString = "" // Some sort of manipulation using this.info string value

  }
}

现在我将开始在其他一些 html 页面中使用 <pageInfo></pageInfo> 标记，同时我想将一些硬编码字符串值传递到 PageInfoComponent class 通过组件选择器。获取字符串值后 PageInfoComponent class 将对其进行操作并添加某种样式，然后显示结果。

pageInfo.component.html

<div>{{manipulatedString}}</div>

那么我如何将字符串值从组件选择器传递给它的 class，以便我可以显示具有可重用组件的操作字符串。

Answer 1

您可以添加

<ng-content></ng-content>

到您的 pageInfo 组件的模板

或者您可以将字符串传递给 pageInfo 组件的输入

@Input() manipulatedString:string;

并且组件显示字符串本身

<span [innerHTML]="manipulatedString"></span>

为此，您需要使用 DomSanitizer 向 Angular 表明从该字符串添加 HTML 标签是安全的（您有责任确保它不包含有害的 HTML) 并像

一样使用它

<pageInfo [content]="manipulatedString"></pageInfo>

您需要在 TypeScript 中添加 <div></div>，或

<pageInfo [content]="'<div>'+manipulatedString+'</div>'"></pageInfo>

Answer 2

您可以使用@Input 装饰器在父级和 child.You 之间进行通信，可以找到文档 here。例如

import { Component, OnInit, Input,OnChanges } from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'pageInfo',
  templateUrl: './pageInfo.component.html',
  styleUrls: ['./pageInfo.component.scss']
})
export class PageInfoComponent implements OnInit,OnChanges{


  public info: string;
  public manipulatedString: string;
  @Input() private stringToManipulate:string;

  constructor() {
  }

ngOnChanges (){
     this.manipulatedString=this.stringToManipulate;

 }

  ngOnInit() {
  }

  stringManipulation(){

    this.manipulatedString = "" // Some sort of manipulation using this.info string value

  }
}

并且在模板中您可以使用

显示

<div>{{manipulatedString}}</div>

并且在父组件中您可以使用

<pageInfo [stringToManipulate]="variable name/'the value of the string you want to send' "></pageInfo>

Answer 3

Günter Zöchbauer 的回答很棒，您可以照着做。我遵循的另一种方式是

通过将字符串绑定到组件的输入变量来调用 html 中的组件，如下所示。

<pageInfo [manipulatedString]="'the hard coded string value'"></pageInfo>

您可以通过将其声明为输入变量来在您的组件中获取它

@Input() manipulatedString:string;

然后你可以在你的组件中操作后简单地显示你的字符串 class

<div>{{manipulatedString}}</div>

Angular4中如何绑定组件选择器显示动态字符串数据

How to bind the component selector to display dynamic string data in Angular 4

angular2-directives

angular