Javascript 角度：将属性传递给动态组件模板

我创建了一个组件，并且我想通过该组件向模板传递一个属性。 这是一个组件：

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>

{{id}

创建的零部件以这种方式放置在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>

我只需要为每个组件设置“数据目标”、“aria labelledby”和“aria控件”属性（取决于组件ID）

---

我不熟悉Angular，希望上面的内容有意义。

您可以使用

@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>