如何使用{{}}

时间:2017-11-20 11:38:29

标签: angular output components

这是我的子组件.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;**
}

这就是我想要使用' produit'变量

      <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

1 个答案:

答案 0 :(得分:0)

使用以下代码从父组件发送produit的值。您还可以看到sample here

父组件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'>