angular ViewChild

以你之姓@ 2023-06-13 03:22 12阅读 0赞

ViewChild 用于操作dom树元素，或是对操作子组件

一、操作dom元素

先用#xxx来标记dom元素

news.component.html

  1. <div #myBox>
  2.     我是一个dom节点
  3. </div>

引入ViewChild，用@ViewChild绑定一个变量。nativeElement是真实的dom节点

news.component.ts

  1. import { Component, OnInit, ViewChild } from '@angular/core';
  3. @Component({
  4.   selector: 'app-news',
  5.   templateUrl: './news.component.html',
  6.   styleUrls: ['./news.component.scss']
  7. })
  8. export class NewsComponent implements OnInit {
  10.   @ViewChild('myBox',{static:false}) myBox:any;
  12.   constructor() { }
  14.   ngOnInit() {
  15.   }
  17.   ngAfterViewInit(): void {
  18.     console.log(this.myBox);
  19.     this.myBox.nativeElement.style.width='200px';
  20.     this.myBox.nativeElement.style.height='100px';
  21.     this.myBox.nativeElement.style.background='red';
  22.     console.log(this.myBox.nativeElement);
  23.     console.log(this.myBox.nativeElement.innerHTML);
  25.   }
  27. }

结果：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70

二、操作子组件

和操作dom元素一样，创建实例

  1. // 获取子组件
  2.   @ViewChild('header',{static:false}) myHeader:any;

子组件：

header.component.html

  1. <h1>我是一个头部组件</h1>

header.component.ts

  1. import { Component, OnInit } from '@angular/core';
  3. @Component({
  4.   selector: 'app-header',
  5.   templateUrl: './header.component.html',
  6.   styleUrls: ['./header.component.css']
  7. })
  8. export class HeaderComponent implements OnInit {
  10.   constructor() { }
  12.   ngOnInit() {
  13.   }
  15.   run() {
  16.     alert('调用header组件的run()');
  17.   }
  18. }

在父组件中调用：

  1. getChildRun(): void {
  2.  // 调用子组件的方法
  3.  this.myHeader.run();
  4. }

发表评论

表情：
评论列表 （有 0 条评论，12人围观）

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

相关阅读