html 将元素从父组件绑定到子组件

Posted 2021-05-11

<div class="panel panel-default">
  <div class="panel-heading">{{ element.type }}</div>
  <div class="panel-body">{{ element.name }} - {{ element.content }}</div>
</div>

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

@Component({
  selector: 'app-server-element',
  templateUrl: './server-element.component.html',
  styleUrls: ['./server-element.component.css']
})
export class ServerElementComponent implements OnInit {
  @Input() element: {type: string, name: string, content: string}; // Bind 'element' to Parent Component with @Input
  // NOTE: optional adding Alias 
  // @Input('srvElement') element: {...} 
  // [app.component.html] must now use [srvElement]="serverElement"
  
  constructor() { }

  ngOnInit() {
  }

}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  serverElements = [{type: 'server', name: 'Testserver', content: 'Just a test'}];

}

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <app-server-element 
        *ngFor="let serverElement of serverElements" 
        [element]="serverElement"></app-server-element> <!-- Child Component uses Alias 'element' (ex. element.name) so we will make 'element' be 'serverElement' -->
    </div>
  </div>
</div>