Angular 4 嵌套组件

Question

希望你一切都好。我在 typeScript 和 angular 4 方面很新，我遇到了一个问题。我想在另一个组件中使用一个组件。数据将可以通过 Http 使用 get 方法访问，并进入父组件中的对象数组，我想使用 ngFor 根据从父组件接收数据来重复子组件。

以下代码是子组件.ts

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

@Component({
  selector: 'app-card',
  templateUrl: './app-card.component.html',
  styleUrls: ['./app-card.component.css']
})
export class AppCardComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

这是我的子组件.html

<mat-card class="pt-3">
  <mat-card-header class="text-truncate pb-2">
    <img mat-card-avatar src="http://material.angular.io/assets/img/examples/shiba1.jpg">
    <mat-card-title class="mt-2">{{pro.name}}</mat-card-title>
  </mat-card-header>
</mat-card>

父组件.ts

import { Component, OnInit } from '@angular/core';
import { FeaturedService } from "../services/featured.service";


@Component({
  selector: 'app-collection',
  templateUrl: './collection.component.html',
  styleUrls: ['./collection.component.css']
})
export class CollectionComponent implements OnInit {

  cc;

  constructor(private featured: FeaturedService) { }

  ngOnInit() {
    this.featured.getAll().subscribe(results => {
      this.cc= results
    });

  }

}

最后是父 html

<div class="row">
          <div class="col-12 text-center pt-4 mb-4">
            <h3>Featured</h3>
            <hr class="title-border" />
          </div>
        </div>
        <div class="row">
          <div *ngFor="let pro of cc" class="col-xl-6 p-md-1 p-lg-1 p-xl-2">
            <app-card></app-card>
          </div>
        </div>

如果您能帮我解决这个问题，我将不胜感激。

Answer 1

您需要将其作为输入传递

并在您的子组件上使用@input 属性

Answer 2

您可以使用嵌入。

父 html，

<div class="row">
          <div class="col-12 text-center pt-4 mb-4">
            <h3>Featured</h3>
            <hr class="title-border" />
          </div>
        </div>
        <div class="row">
          <div *ngFor="let pro of cc" class="col-xl-6 p-md-1 p-lg-1 p-xl-2">
            <app-card>{{ pro.name }}</app-card>
          </div>
        </div>

子 html，

<mat-card class="pt-3">
  <mat-card-header class="text-truncate pb-2">
    <img mat-card-avatar src="http://material.angular.io/assets/img/examples/shiba1.jpg">
    <mat-card-title class="mt-2">
      <ng-content></ng-content>
    </mat-card-title>
  </mat-card-header>
</mat-card>

或者您可以按照其他答案中的建议声明 @Input 属性

Answer 3

使用@Input 将pro 从父级传递给子级

在子组件中：

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

@Component({
  selector: 'app-card',
  templateUrl: './app-card.component.html',
  styleUrls: ['./app-card.component.css']
})
export class AppCardComponent implements OnInit {

  @Input('pro') pro : any;
  constructor() { }

  ngOnInit() {
  }

在父组件中：

<div class="row">
          <div class="col-12 text-center pt-4 mb-4">
            <h3>Featured</h3>
            <hr class="title-border" />
          </div>
        </div>
        <div class="row">
          <div *ngFor="let pro of cc" class="col-xl-6 p-md-1 p-lg-1 p-xl-2">
            <app-card [pro]="pro" ></app-card>
          </div>
        </div>