javascript - Angular:将属性传递给动态组件模板

Question

我创建了一个组件，我想通过该组件将一个属性传递给模板。这是组件:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-card-generator',
  templateUrl: './card-generator.component.html',
  styleUrls: ['./card-generator.component.css'],
  inputs: ['id', 'collapseid', 'headingid','collapsehashid']
  })
export class CardGeneratorComponent implements OnInit {
  bindings: {
            headingid:'@?',
    collapseid:'@?',
    collapsehashid
           }
  constructor() { }
  ngOnInit() {}

这是模板:

<button class="btn btn-link collapsed"  style="text-decoration:none;" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          {{id}}
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body"></div>
    </div>

创建的组件以这种方式放置在 home.component 中:

<div id="cardDivContainer" >

    <app-card-generator id="Chart 1" collapsehashid="data-target='#collapseOne'" collapseid="aria-controls='collapseOne'" headingid="aria-labelledby='headingOne'"></app-card-generator>
    <app-card-generator id="Chart 2" collapsehashid="data-target='#collapseTwo'" collapseid="aria-controls='collapseTwo'" headingid="aria-labelledby='headingTwo'"></app-card-generator>

  </div>

我只需要为每个组件设置“data-target”、“aria-labelledby”和“aria-controls”属性(取决于组件 ID)。

我是 Angular 的新手，我希望上面的内容有意义。

Answer 1

您可以使用@Input 来引用组件中的元素。元素可以作为参数传递给外部。像这样的东西:

import { 
  Component,
  OnInit,
  Input,
  Output,
  EventEmitter
 } from '@angular/core';
@Component({
  selector: 'app-card-generator',
  styleUrls: ['./card-generator.component.css'],
  templateUrl: './card-generator.component.html'
  })
export class CardGeneratorComponent implements OnInit {
  @Input() id: string;
  @Input() collapseid: string;
  @Input() headingid: string;
  @Input() collapsehashid: string;

  constructor() {
  }

  ngOnInit() {}
}

如果您引用的元素中不存在属性，您可以使用 attr.attribute 并使用 {{}} 表示法

<button class="btn btn-link collapsed"  style="text-decoration:none;" type="button" data-toggle="collapse" attr.data-target="{{'#' + collapseid}}" aria-expanded="false" attr.aria-controls="collapseid">

        </button>
    <div id="{{collapseid}}" class="collapse" attr.aria-labelledby="{{headingid}}" data-parent="#accordionExample">
      <div class="card-body"></div>
    </div>

最后您可以在外部调用中访问在您的组件中创建的属性

<div id="cardDivContainer" >

    <app-card-generator id="Chart 1" collapsehashid="collapseOne" headingid="headingOne"></app-card-generator>
    <app-card-generator id="Chart 2" collapsehashid="collapseTwo" headingid="headingTwo"></app-card-generator>

  </div>

此链接中有更多@Input 和@Output 详细信息:

https://stackblitz.com/edit/card-generator-sample?file=src%2Fapp%2Fapp.component.html