Question

我正在尝试读取角度组件的DOM中的更改。

我正在使用Observables将所做的更改检索到Typescript变量中（不确定这是否是正确的方法）。这是我的实现方式：

app.component.html

<input type="text" name="refl" [(ngModel)]="txt">
<app-test>
    <div class="t1">
        The text : {{txt}}
    </div>
</app-test>

test.component.html

<div #t><ng-content select=".t1"></ng-content></div>
Received Text : {{text}}

test.component.ts

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: [ './test.component.scss' ]
})
export class TestComponent implements AfterContentInit {

  @ViewChild('t') private tq: ElementRef;
  private text: string = null;
  constructor () {}

  ngAfterViewInit() {

    new Observable(obs => {obs.next(this.tq.nativeElement.innerText);})
    .subscribe((dt: string) => { this.text = dt; });
  }
}

我的理解是，由于我使用可观察的方法来监视DOM中的更改，因此我会在test.component.html中反映到{{text}}。

但是我在那个地方什么也没收到。

这是使用角度观察DOM变化的正确方法。

Answer 1

问题可能很严重，但是

角度：使用可观察对象检测DOM中的变化

您将不得不使用MutationObserver并将事件从其回调推送到您的可观察对象，以做出相应的反应。

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Answer 2

如果我正确理解了您的意见，您想观察DOM中的更改并更改变量，则可以使用Subject.next（）

Subject.next（）：主题next方法用于将消息发送到可观察对象，然后将消息发送到该可观察对象的所有角度组件。

实现此目标的步骤

1）提供服务 MyService.Service.ts

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class MyService {
   private subject = new Subject<any>();

   UpdateText(message: string) {
      this.subject.next({ text: message });
   }

    clearText() {
      this.subject.next();
   }

    getText(): Observable<any> {
       return this.subject.asObservable();
    }
}

2） app.component.html

<input type="text" name="refl" [(ngModel)]="txt" (keyUp)="ChangeText()">

3） app.component.ts

import {myService} from './myservice.ts';
@Component({
  selector: 'app',
  templateUrl: './test.component.html',
  styleUrls: [ './test.component.scss' ]
 })
 export class AppComponent {
 txt: any;
 constructor (private myServiceObj: myService) {}

 ChangeText(){
   this.myServiceObj.UpdateText(txt);
 }
}

4） test.component.html

Received Text : {{text}}

5） test.component.ts

import {myService} from '../myservice.ts';
@Component({
 selector: 'app-test',
 templateUrl: './test.component.html',
 styleUrls: [ './test.component.scss' ]
 })
export class TestComponent {

 private text: string = null;
 subscription: Subscription;

 constructor (private myServiceObj: myService) {
  this.subscription = this.myServiceObj.getText().subscribe(text => { 
  this.text = text; });
  }

  ngOnDestroy() {
    // unsubscribe to ensure no memory leaks
    this.subscription.unsubscribe();
  }  
}

享受编码：）

Angular：使用可观察对象检测DOM中的更改

app.component.html

test.component.html

test.component.ts

2 个答案: