angular父子传值

待我称王封你为后i 2023-08-17 16:29 117阅读 0赞

![在这里插入图片描述][20190928215558431.png]  
header组件

ts
    **import { Component, OnInit ,Input} from '@angular/core';
    //input引入
    @Component({
      selector: 'app-header',
      templateUrl: './header.component.html',
      styleUrls: ['./header.component.css']
    })
    export class HeaderComponent implements OnInit {
      @Input() title:any;  //接收数据
      constructor() { }
    
      ngOnInit() {
      }
    
    }
    
    
    html
    <header>{
       {title}}</header>

home组件
    ts
    import { Component, OnInit } from '@angular/core';
    
    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.css']
    })
    export class HomeComponent implements OnInit {
      public title:string="我是你爸爸知道吗";  //定义一个数据
      constructor() { }
    
      ngOnInit() {
      }
    
    }
    
    
    html
    <app-header [title]="title"></app-header>
    <br>
    <hr>
    <br>
    <div>我是首页组件</div>

主组件引入

<app-home></app-home>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[20190928215558431.png]: /images/20230810/7c801946cd5349a4a216943ee1e6d8ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20230810/49068d47c6564199af7cf1685f931a6e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，117人围观）

还没有评论，来说两句吧...

相关阅读

相关 angular父子传值

![在这里插入图片描述][20190928215558431.png] header组件 ts import { Component, OnInit ,I

待我称王封你为后i/ 2023年08月17日 16:29/ 0 赞/ 118 阅读

相关 react 父子传值

![20200218154327871.png][] 创建父组件 Demofather.js 第一种传值：在子元素标签上 title='待办事项' x=\{1\} 字

Bertha 。/ 2023年07月06日 11:49/ 0 赞/ 15 阅读

相关 Angular 父子组件传值，非父子组件传值

一、子组件调用父组件，父组件给子组件传值引入Input header.component.ts import { Component, OnInit, In

深藏阁楼爱情的钟/ 2023年06月13日 04:46/ 0 赞/ 21 阅读

相关 Vue - 组件传值（父子组件间传值、非父子组件间传值）

推荐：[Vue汇总][Vue] Vue - 组件传值（父子组件间传值、非父子组件间传值）如果你对组件不太了解，推荐你先阅读它：[Vue - Vue组件基础][Vue

我就是我/ 2022年12月21日 11:00/ 0 赞/ 339 阅读

相关 angular.js父子及兄弟元素之间传值

父子之间 <div ng-controller="ParentCtrl"> <div ng-controller="ChildCtrl"></div>

向右看齐/ 2022年05月16日 11:07/ 0 赞/ 202 阅读

相关 Vue父子传值与非父子传值

父传子：主要是通过子组件使用 props() 方法来接收父组件传递过来的值 Vue.component('father',{

浅浅的花香味﹌/ 2022年05月14日 04:25/ 0 赞/ 329 阅读

相关 Vue 父子传值

参考一：父组件向子组件传值： parent： <parent> <child :message="msg"></child> </parent>

Myth丶恋晨/ 2022年04月25日 02:18/ 0 赞/ 301 阅读

相关 angular4父子组件间传值

父组件向子组件传值 @Input 父组件： father.template.html <h1>父组件</h1> <cmt-child [data]

水深无声/ 2022年03月31日 08:13/ 0 赞/ 308 阅读

相关 Vue父子组件传值

Vue父子组件传值：有四种方式：props，ref，emit 和模板传递通信slot 通过props来传值：静态传值就是直接通过props来传递动态传值是通

Dear 丶/ 2022年01月22日 15:15/ 0 赞/ 400 阅读

相关 uniapp父子组件传值

父组件页面（parent.vue） <template> <view> <Child @out=out :backGround=backGr

灰太狼/ 2021年09月13日 15:54/ 0 赞/ 582 阅读