2021-05-05

angular组件挂载 父子组件传值

 

 

一 、 创建组件并挂载 

             新建组件   home news 挂载到根组件里 (组件少时使用这种方式)
            ng g component   components/home    ng g component componet/news 

            根模块中挂载home组件  <app-home></app-home>

二、创建模块并创建改模块下的组件 

           创建用户模块  (用户相关的组件放在一个模块中)
           ng g module  module/user

           创建用户模块的组件
           ng g component module/user/component/profile 
           ng g component module/user/component/address
           ng g component module/user/component/order

           ng g component module/user

   
三、 创建服务

        

         ng g service module/user/services/common

         自定义模块默认引入 CommonModule 模块

         用户模块中 引入服务
         user.module中 providers:[CommonService],

        根模块中使用user组件 在用户模块中暴露相应组件
        exports:[UserComponent]

        根模块中引入自定义模块
        imports:[UserModule]
     
        根组件中挂载user  <app-user></app-user>   
 

四、 父组件给子组件传值 @input  （方法 数据  传递this(父组件自身)）

        1父组件调用子组件时传入数据  
         <app-header [msg]="msg"></app-header>
        2子组件引入input模块 
        import {Component,OnInit,Input} from '@angular/core';
        3子组件中@input接收父组件传过来的数据
        @input() msg:string

五、子组件给父组件传值 通过@output 触发父组件的方法 

       1子组件引入Output 和 EventEmitter
        import {Component,OnInit,Input,Output,EventEmitter} from '@angular/core';
       2子组件中实例化EventEmitter 
       @Output() private outer=new EventEmitter<String>();
       /*用EventEmitter 和  Output装饰器配合使用 <String>制定类型变量*/
       3子组件通过EventEmitter 对象outer实例广播数据
       sendParent(){
        this.out.emit('msg from child');
        }
       4父组件调用子组件时，定义接收事件，outer就是子组件EventEmitter对象outer 
       <app-header (outer)="runParent($event)"></app-header>
       5父组件接收到数据会调用自己的runparent()方法，这个时候就能拿到子组件的数据
        //接收子组件传过来的数据
        runParent(msg:string){
         alert(msg);
        }

六、 父组件通过@ViewChild（dom节点） 主动获取子组件的数据和方法

       

        1.调用子组件给子组件定义一个名称 （html） 或直接指定组件类
         <app-footer #footerChild></app-footer>
         <p (click)="clickDemo()"  #changeIcon>icon</p> 
         //html(父组件中的子组件）
         <app-test></app-test>

         <button （click）=“getChildMsg()”>获取子组件的msg</button>
         <button （click）=“getChildRun()”>执行子组件的run方法</button>

        2父组件ts引入ViewChild
        // 直接引入子组件
        @ViewChild(TestComponent) test: TestComponent;
        @ViewChild('changeIcon') changeIcon;
        @ViewChild('footer') footer:any;
        getChildMsg(){
         //获取子组件数据
          console.log(this.footer.msg);
         }
         getChildRun(){
           this.footer.run();
         }

        3子组件中定义
        public msg ="我是子组件";
        run(){
          alert("我是子组件run方法");
        }

angular 语言官方网站

 https://angular.cn/

响应式编程是一种面向数据流和变更传播的异步编程范式 RxJS库 官方文档

 https://rxjs.dev/guide/overview

ng-zorro-antd  Angular UI 组件库 官方网站

https://ng.ant.design/docs/introduce/zh

ng-alain框架 中文官方网站

https://ng-alain.com/zh   

企业级中后台前端/设计解决方案  NG-ALAIN v9.5详细教程

 https://www.bookstack.cn/books/NG-ALAIN-9.0-zh