Angular：将属性传递给动态组件模板

Question

I have a component created, and I want to pass an attribute though the component to the template. This is the component:

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() {}

and this is the template:

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

created components are placed in home.component this way:

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

I just need to set the "data-target", "aria-labelledby", and the "aria-controls" attributes for each component (depending on the component ID).

I am new to Angular, I hope the above make sense.

Answer 1

You can use @Input to reference the elements within the component. The elements can be passed as parameter outside. Something like:

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() {}
}

If the attributes do not exist in the element you are referencing, you can use attr.attribute and use the {{}} notation

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

And finally you can access the attributes created in your component in the call from the outside

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

More @Input and @Output details in this link:

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