如何使用{{}}在子html組件中使用從父組件和@input導入的變量

Question

這是我的子組件.ts文件：

import { Component, OnInit,Input } from '@angular/core';
import { IProduct } from '../product/produit';


@Component({
  selector: 'app-zoomdetails',
  templateUrl: './zoomdetails.component.html',
  styleUrls: ['./zoomdetails.component.css']
})
export class ZoomdetailsComponent implements OnInit {
  **@Input() produit : String;**
}

這是我要使用“產品”變量的地方

      <div class="col-md-6" style="border:0px solid rgba(163, 152, 152, 0.856)">
        <span class="pull-right">
        <!-- Datos del vendedor y titulo del producto -->
        ***<h1>{{produit}} </h1>***    
        <h4 style="color:#337ab7"> Daniel Keyes <small style="color:#337ab7">(50 ventes)</small></h4>

任何幫助plzzzzz

Answer 1

使用以下代碼從父組件發送產品的值。 您也可以在這里看到示例

父組件TS文件

export class AppComponent  {
  //passing values from parent to child
  produit = "child";          
}

父組件HTML模板-以下是子標記

<app-zoomdetails [produit]=produit ></app-zoomdetails>

子組件HTML模板

<input type="textbox" [(ngModel)]='produit'>