父组件和子组件联系

Posted 上帝不是要你成功,而是让你去尝试

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了父组件和子组件联系相关的知识,希望对你有一定的参考价值。

方法一:

@viewChild   引入子组件

 1、传入组件

子组件:

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

@Component({
  selector: ‘app-childen‘,
   templateUrl: ‘./user.component.html‘,
   styleUrls: [‘./user.component.css‘]
})
export class userFile{
  fun1() {
    alert(‘子组件方法‘);
   }
}


父组件:
import {Component, ViewChild} from ‘@angular/core‘;
import { userFile } from ‘./childen/user.component‘

@Component({
selector: ‘app-parent‘,
 templateUrl: ‘./parent.component.html‘,
 styleUrls: [‘./parent.component.css‘]
})

export class ParentComponent {
@ViewChild(userFile) user:
userFile ;

 OnClick() {
    this.user.fun1();
   }
}

2、传入字符串这种方式是针对指令

import {Component, ViewChild} from ‘@angular/core‘;

@Component({
selector: ‘app-parent‘,
 templateUrl: ‘./parent.component.html‘,
 styleUrls: [‘./parent.component.css‘]
})

export class ParentComponent {

@ViewChild(‘myChild‘) child;

 OnClick() {
this.child.fun1();
 }
}


使用方法
<app-component #myCilid></app-component>





方法二 @Input和@Output方法
方法三 局部变量获取子组件

<button (click)=myChild.func1()>提交</button>
<app-component #myCilid></app-component>


以上是关于父组件和子组件联系的主要内容,如果未能解决你的问题,请参考以下文章

是否可以在 Blazor 中为父组件和子组件指定两个不同的类型参数值?

Vue 的父组件和子组件生命周期钩子执行顺序

Angular 2 Dart:如何在父组件与路由器和子组件之间共享变量?

React父传子和子组件触发修改父组件修改数据

父组件和子组件之间交换数据

父组件和子组件之间的生命周期执行顺序