zoukankan      html  css  js  c++  java
  • Angular 中的 dom 操作(ViewChild)以及父子组件中通过 ViewChild 调用子组件的方法

    <app-header #header></app-header>
    
    <div #myBox>
    
       我是一个dom节点
    </div>
    
    
    <button (click)="getChildRun()">获取子组件的方法</button>
    /*
    
    ViewChild获取dom节点
        1、模板中给dom起一个名字
          <div #myBox>
            我是一个dom节点
          </div>
        2、在业务逻辑里面引入ViewChild
        import { Component, OnInit,ViewChild} from '@angular/core';
        3、 写在类里面    @ViewChild('myBox') myBox:any;
        4、ngAfterViewInit生命周期函数里面获取dom
        this.myBox.nativeElement
    */
    
    
    import { Component, OnInit,ViewChild} from '@angular/core';
    
    @Component({
      selector: 'app-news',
      templateUrl: './news.component.html',
      styleUrls: ['./news.component.scss']
    })
    export class NewsComponent implements OnInit {
      //获取dom节点
      @ViewChild('myBox') myBox:any;
      //获取一个组件
      @ViewChild('header') header:any;
      constructor() { }
    
      ngOnInit() {
      }
    
      ngAfterViewInit(): void {
        console.log(this.myBox.nativeElement);
        this.myBox.nativeElement.style.width='100px';
        this.myBox.nativeElement.style.height='100px';
        this.myBox.nativeElement.style.background='red';
        console.log(this.myBox.nativeElement.innerHTML);
      }
    
    
      getChildRun(){
    
        //调用子组件里面的方法
         this.header.run();
         
      }
    }

    效果:

  • 相关阅读:
    ASP.NET中Cookie编程的基础知识
    一道编程题
    软件开发一点心得
    迅雷产品经理笔试题
    常用JS 1
    设计模式
    整理思路
    抽象工厂模式 Abstract Factory
    单件模式(Single Pattern)
    序列化
  • 原文地址:https://www.cnblogs.com/loaderman/p/10898339.html
Copyright © 2011-2022 走看看