Angular学习-2021.08.30

Angular学习-2021.08.30

@ViewChild

属性装饰器，用于配置一个视图查询。

变更检测器会在视图的 DOM 中查找能匹配上该选择器的第一个元素或指令。

如果视图的 DOM 发生了变化，出现了匹配该选择器的新的子节点，该属性就会被更新。

视图查询在 ngAfterViewInit 钩子函数调用前完成，因此在 ngAfterViewInit 钩子函数中，就能正确获取查询的元素。

static - 如果为 true，则在变更检测运行之前解析查询结果，如果为 false，则在变更检测之后解析。默认为 false。

用法

用法1：(在angular中进行dom操作)

<div #mapRef></div>

 @ViewChild('mapRef', { static: true }) mapElement: ElementRef;
 //this.mapElement.nativeElement相当于document.getElementById('map')

用法2：（通过放置锚点获取子组件中的方法和属性）

<app-test-it #header></app-test-it>
<button (click)="getSonFn()">点击</button>

import {ElementRef,ViewChild} from "angular/core";

@ViewChild('header',{static:true}),my:any;

getSonFn(){
	this.my.run();
}

其他用法见此篇

EventEmitter

方法

emit()用于发射值，subscribe()则接收处理

emit(value?: T): void

父子组件之间通信

数据发送到子组件

@Input() 允许父组件更新子组件中的数据。@Input() 装饰器表示该属性可以从其父组件中获取值。

配置子组件

首先要导入 Input，然后用 @Input() 装饰该属性。

import { Component, Input } from '@angular/core'; // First, import Input
export class ItemDetailComponent {
  @Input() item = ''; // decorate the property with @Input()
}

在这个例子中， @Input() 会修饰属性 item，它的类型为 string，但 @Input() 属性可以是任意类型，比如 number、string、boolean 或 object。item 的值来自父组件。

接下来，在子组件模板中添加以下内容：

<p>
  Today's item: {{item}}
</p>

配置父组件

下一步是在父组件的模板中绑定该属性。在这个例子中，父组件模板是 app.component.html 。

1. 使用子组件的 selector (<app-item-detail>) 作为父组件模板中的指令。
2. 使用属性绑定把子组件的 item 属性绑定到父组件的 currentItem 属性上。

<app-item-detail [item]="currentItem"></app-item-detail>

1. 在父组件类中，为 currentItem 指定一个值：

content_copyexport class AppComponent {
  currentItem = 'Television';
}

通过 @Input()，Angular 把 currentItem 的值传给子组件，以便 item 渲染为 Television 。

下图展示了这种结构：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xdjZgSlh-1630318419025)(https://angular.cn/generated/images/guide/inputs-outputs/input-diagram-target-source.svg)]

方括号 [] 中的目标就是子组件中用 @Input() 装饰的那个属性。绑定源（等号的右边部分）则是父组件传给内嵌组件的数据。

把数据发送到父组件

@Output() 允许子组件向父组件发送数据。子组件使用 @Output() 属性来引发事件，以通知父组件这一变化。为了引发事件， @Output() 必须是 EventEmitter 类型。

配置子组件

1. 在子组件类中导入 Output 和 EventEmitter

   import { Output, EventEmitter } from '@angular/core';
   

2. 在组件类中，用 @Output() 装饰一个属性。下面的例子中 newItemEvent 这个 @Output() 的类型为 EventEmitter ，这意味着它是一个事件。

3. 在同一个组件类中创建一个 addNewItem() 方法

   export class ItemOutputComponent {
   
     @Output() newItemEvent = new EventEmitter<string>();
   
     addNewItem(value: string) {
       this.newItemEvent.emit(value);
     }
   }
   

   上述声明中的差异点如下：

• @Output() - 一个装饰器函数，它把该属性标记为数据从子组件进入父组件的一种途径

• newItemEvent - 这个 @Output() 的名字

• EventEmitter<string> - 这个 @Output() 的类型

• new EventEmitter<string>() - 使用 Angular 来创建一个新的事件发射器，它发出的数据是 string 类型的。

  配置子组件的模板

  <label for="item-input">Add an item:</label>
  <input type="text" id="item-input" #newItem>
  <button (click)="addNewItem(newItem.value)">Add to parent's list</button>
  

  addNewItem() 方法接受一个 #newItem.value 属性的值作为参数。

  配置父组件

  export class AppComponent {
    items = ['item1', 'item2', 'item3', 'item4'];
  
    addItem(newItem: string) {
      this.items.push(newItem);
    }
  }
  

  <app-item-output (newItemEvent)="addItem($event)"></app-item-output>
  

  详情查看该文档

Angular插件

toast提示框

event)">

详情查看该[文档](https://angular.cn/guide/inputs-outputs)

### Angular插件

##### [toast提示框](https://www.cnblogs.com/zero-zm/p/9932272.html)