Angular: передача атрибутов в шаблон динамического компонента

У меня есть компонент, и я хочу передать атрибут через компонент в шаблон. Это компонент:

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» для каждого компонента (в зависимости от идентификатора компонента).

Я новичок в Angular, надеюсь, что сказанное выше имеет смысл.

javascript angular attributes components accordion

25.07.2018 18:11

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

934

Ответы 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

26.07.2018 07:21