javascript - 从 Angular 4 中的另一个组件访问另一个组件

Question

我需要从另一个产品组件滚动 app.module.ts 中的标签

app.module.ts

 <div  class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
		<nav-header></nav-header>
 		<main class="mdl-layout__content" #scrollMe>
            <router-outlet></router-outlet>
						
		<app-footer [otherType]="'siteSetting'" [type]="'getAllPages'"></app-footer>
		</main>	
</div>  
	<cart-quantity-icon></cart-quantity-icon>

主标签，即#scrollMe需要使用以下组件滚动

产品.组件.ts

import { Component, OnInit,ViewChild,ElementRef,ContentChild } from '@angular/core';
import { ActivatedRoute,   NavigationEnd ,Router, Event,  NavigationStart, RoutesRecognized,RouteConfigLoadStart, 
    RouteConfigLoadEnd,  NavigationCancel, NavigationError} from '@angular/router';
@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
	export class ProductsComponent implements OnInit {
 scrollTopButton = false;
  @ViewChild('infinite')  private myScrollContainer : ElementRef;
  @ContentChild('scrollMe')  private myScroll : ElementRef;
scrollToTop() {
    console.log(this.scrollTopButton);
     this.myScrollContainer.nativeElement.scrollTo(0, 0);
     this.myScroll.nativeElement.scrollTo(0, 0);

     window.scrollTo(0,0);
    //this.content.scrollToTop(700);
    this.scrollTopButton = false;
  }}

 <div style=" max-height: 750px;
      overflow: auto;" #infinite infiniteScroll
                                      [infiniteScrollDistance]="2"
                                      [infiniteScrollThrottle]="1000"
                                      (scrolled)="getProducts()" [scrollWindow]="false" class="mdl-grid mdl-cell mdl-cell--top mdl-cell--9-col mdl-cell--8-col-tablet mdl-cell--4-col-phone">

                              
                                   <!-- new card -->
                                   <product *ngFor="let p of products" [data]="p" [type]="'normal'"></product>

                                
                               		<div > 
									</div>
                          

<button *ngIf="scrollTopButton" (click)="scrollToTop()"   id="return-to-top" mat-fab color="primary"><i class="material-icons" style="font-size: 24px;">keyboard_arrow_up</i></button>

当我单击返回顶部按钮时，我需要滚动#infinite 和#scrollMe。我尝试过以下操作。也尝试使用 viewChild 而不是 contentChild

 @ViewChild('infinite')  private myScrollContainer : ElementRef;
  @ContentChild('scrollMe')  private myScroll : ElementRef; //Also ViewChild here but none works!!
scrollToTop() {
    console.log(this.scrollTopButton);
     this.myScrollContainer.nativeElement.scrollTo(0, 0);
     this.myScroll.nativeElement.scrollTo(0, 0);

     window.scrollTo(0,0);
    //this.content.scrollToTop(700);
    this.scrollTopButton = false;
  }}

infinite可以工作，但scrollMe不行。

Answer 1

这不起作用，因为应用程序产品中的 ContentChild 无法访问 DOM 中的父元素。您必须使用服务进行通信。ComService 来创建和提供。

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

@Injectable()
export class ComService {
   messageStream = new Subject();

   getMessageSubscribe() {
      return Observable.from(this.messageStream);
   }
   sendMessage() {
      this.messageStream.next(this.filteredOrderList);
   }
}

在组件主组件中订阅消息:

@ViewChild('scrollMe')  private myScroll : ElementRef;
constructor(
   private comService: ComService
) {
   this.subscribeMes = this.comService.getComunication().subsribe(element => {
    if(element) {
         this.myScroll.nativeElement.scrollTo(0, 0);
        //when element is true you got info from child to scroll 
    }
  })

 ngOnDestroy() {
    this.subscribeMes.unsubscribe();
 }

}

#scrollMe 插入到主组件模板的顶部元素中。在应用程序产品中:

constructor(
   private comService: ComService
) {}
@ViewChild('infinite')  private myScrollContainer : ElementRef;

scrollToTop() {
   console.log(this.scrollTopButton);
   this.myScrollContainer.nativeElement.scrollTo(0, 0);
   this.comService.sendMessage(true);

   window.scrollTo(0,0);
   //this.content.scrollToTop(700);
   this.scrollTopButton = false;
 }}