如何在 Angular 中使用 ViewChild 而不是 querySelector？

如何解决如何在 Angular 中使用 ViewChild 而不是 querySelector？

我是 Angular 的新手。我使用 querySelector 滚动到组件中的特定片段。但它在不同的浏览器中表现不同。我发现如果我使用 ViewChild 重写同样的东西，那么它可能会正常运行。 ts 文件中的 newScroll 函数使用的是 querySelector。如何使用 ViewChild 而不是 querySelector 重写它？

这是我的 service.component.ts 文件。

  import { AfterContentChecked,AfterContentInit,AfterViewInit,Component,OnDestroy,OnInit } from '@angular/core';
  import { ActivatedRoute,NavigationEnd,Router } from '@angular/router';
  import { environment } from 'src/environments/environment';
  import { delay,filter } from 'rxjs/operators';
  @Component({
  
    selector: 'app-serviepage',templateUrl: './serviepage.component.html',styleUrls: ['./serviepage.component.scss']
  })
  export class ServiepageComponent implements OnInit,AfterContentChecked,AfterContentInit {
    env = environment;
    fragment
    subscripti
    isInitDone = false
    constructor(private activatedRoute: ActivatedRoute,private router: Router) {
    }
  
  
    ngOnInit(): void {
      this.activatedRoute.fragment.subscribe(res => {
        console.log('res',res);
        this.fragment = res;
        this.newScroll();
      });
    }
  
  
    ngAfterViewInit(): void {
      //console.log('ngAfterViewInit')
      this.isInitDone = true
    };
  
    newScroll(){
      if(!this.fragment){
        return;
      }
      try {
        document.querySelector('#' + this.fragment).scrollIntoView();
        this.fragment = '';
      } catch (e) { }
    }
    ngAfterContentChecked(): void {
      //Called after every check of the component's or directive's content.
      //Add 'implements AfterContentChecked' to the class.
      //console.log('ngAfterContentChecked')
    }
  
    ngAfterContentInit(): void {
      //Called after ngOnInit when the component's or directive's content has been initialized.
      //Add 'implements AfterContentInit' to the class.
      // // console.log('ngAfterContentInit')
      // this.subscription = this.router.events.pipe(
      //   filter(event => event instanceof NavigationEnd)
      // ).subscribe((event: NavigationEnd) => {
      //   //if (this.isInitDone) {
      //   this.checkScroll()
  
      //   //}
      // });
    }
    ngOnDestroy() {
      // this.subscription.unsubscribe();
    }
  
    // checkScroll() {
    //   this.fragment = this.activatedRoute.snapshot.fragment
    //   if (!!this.fragment) {
    //     this.scroll(this.fragment)
    //   }
    // }
  
    // scroll(id) {
    //   console.log('exactId',id)
    //   if(!id){
    //     return;
    //   }
    //   const elmnt = document.getElementById(id);
    //   elmnt.scrollIntoView({ behavior: "smooth",block: "start",inline: "nearest" });
    // }
  
  }```

This is my service.component.html

 <div class="bannerServices">
    <!--<h1 class="bannerHeading">OUR SERVICES</h1>-->
</div>
<div class="tagline">
    <p>Check Out Some of Our professional Collections</p>
</div>
<div class="serviceSection">
    <div class="ContentSection" id="customer-service">
        <div class="contentImage customer">
            <!--<img src="{{env.assetsPath}}assets/img/seviceImages/Connaught-Navy.jpg" alt="">
            <img src="{{env.assetsPath}}assets/img/seviceImages/Busso-Waistcoat---Navy.jpg" alt="">-->
            <img src="{{env.assetsPath}}assets/img/logo/customer.jpg" alt="">
        </div>
        <div class="ContentText">
            <div>
                <h1>CUSTOMER SERVICE </h1>
                <p>TWC pride themselves on delivering a first class service,using high quality products while providing
                    a flexibility that is second to none. No order is too big or too small; all orders are important to
                    us! Our dedicated team apply their extensive knowledge of our products to assist you with your
                    uniform requirements,offering advice on how to obtain your ideal look and dealing with queries or
                    issues quickly and efficiently. Our team work closely together,ensuring that you have continuity in
                    your care and everyone has a clear understanding of your requirements. Our friendly approach enables
                    us to build relationships with our clients,making us an extension or your business,and making you
                    a part of our extended family. As part of our initial consultancy,we have introduced the use of
                    ‘mood boards’ to give our clients an idea of what options are available to them with regards to
                    colour combinations,styles,branding,etc. We also provide a sampling service where you can trial a
                    style to suit your needs.
                </p>
                <!--<div>
                    <a href="">Learn More</a>
                </div>-->
            </div>
        </div>
    </div>
    <div class="ContentSection" id="tailoring-and-alterations">
        <div class="contentImage content-order-2">
            <img src="{{env.assetsPath}}assets/img/seviceImages\Cassino-Jkt-Mid-blue.jpg" alt="">
            <img src="{{env.assetsPath}}assets/img/seviceImages/Cassino Marino Double.jpg" alt="">
        </div>
        <div class="ContentText ContentSectionplue content-order-1">
            <div class="ContentSectionplue">
                <h1>TAILORING AND ALTERATIONS </h1>
                <div>Measuring and Fitting Service</div>
                <br>
                <p>
                    At TWC we have always had a measuring and fitting service for our clients. This service is free of
                    charge and is adapted to the individual needs of our client to ensure all body sizes and shapes are
                    accounted for. Our experience and knowledge allows our Account Manager to individually recommend a
                    suitable style and cut as part of this in-house measuring and tailoring service. We can also arrange
                    for samples and alterations to ensure that you achieve a look that enhances your image.
                </p>
                <!--<div>
                    <a href="">Learn More</a>
                </div>-->
            </div>
        </div>
    </div>
    <div class="ContentSection" id="branding">
        <div class="contentImage">
            <img src="{{env.assetsPath}}assets/img/seviceImages/Connaught-Navy.jpg" alt="">
            <img src="{{env.assetsPath}}assets/img/seviceImages/Prosecco Blouse-Pink.jpg" alt="">
        </div>
        <div class="ContentText">
            <div>
                <h1>BRANDING</h1>
                <div class="subh1">Heatseal Printing</div><br>
                <p>An alternative to embroidery; heat seal application is an ideal option for larger images,especially
                    those on the backs of outerwear garments. As heat seal transfers do not puncture fabrics,it is a
                    perfect option for waterproof garments. They are also suitable for cotton garments. Available in an
                    array of colours,heat seal transfers can withstand regular washing without peeling,making heat
                    seal printing an ideal choice for your branding. As with embroidered logos,TWC have the facility to
                    apply heat seal transfers in-house,keeping the production of your garments all under one roof and
                    ensuring a speedy turnaround of your order.
                </p>
                <br>
                <div class="subh1">Tax Tabbing</div>
                <br>
                <p>By opting for our tax tabbing service,you legally transform your clothes into your uniform thus
                    providing you with possible tax allowances. A tax tab is a woven fabric label that is added
                    externally onto the garment to show that it is uniform. These are produced with your logo and as
                    well as offering potential financial benefits can also be a more subtle and discrete way of branding
                    your garments.</p>

                <br>
                <div class="subh1">Embroidery</div>
                <br>
                <p>
                    TWC know that a branded garment enhances the presence of your company. Branding garments can also
                    provide a sense of belonging for your employees. We can easily add your corporate identity to any
                    garments required. Whether you have an existing logo are you want to design a new compilation we ca
                    digitise and apply this to almost any garment with our in-house embroidery. Once the design has been
                    approved,we will apply the logo to your garments. Embroidery is best suited to smaller less
                    intricate images.

                </p>
                <!-- <div>
                    <a href="">Learn More</a>
                </div>-->
            </div>
        </div>
    </div>
    <div class="ContentSection" id="delivery-and-distribution">
        <div class="contentImage content-order-2 transport">
            <!--<img src="{{env.assetsPath}}assets/img/seviceImages/Cassino-Jkt-Mid-blue.jpg" alt="">
            <img src="{{env.assetsPath}}assets/img/seviceImages/Connaught-Navy.jpg" alt="">-->
            <img src="{{env.assetsPath}}assets/img/seviceImages/transport.png" alt="">

        </div>
        <div class="ContentText ContentSectionplue content-order-1 transport">
            <div class="ContentSectionplue">
                <div id=""></div>
                <h1>DELIVERY AND DISTRIBUTION </h1>
                <p>TWC has an inhouse delivery service that allows us to ensure that all our garments are delivered in a
                    pristine condition. This service is provided free of charge. All TWC garments are ‘man packed’ using
                    marked packaging. All of our suits are provided with a high quality complimentary branded zip bag.
                    Packaging is individually labelled with the wearers name and the site that they are located. We do
                    not charge for our deliveries as we believe this should be part our service provision,in addition
                    any collection of garments requiring alterations,exchanges or refunds are also provided free of
                    cost. Local deliveries are made by our TWC drivers who adhere to our high standards of courtesy and
                    customer service. In line with our customer care and quality procedures all orders are delivered to
                    sites/clients as per your instruction. Your orders can be delivered to a specified location,for
                    example,control room,or loading bay where a signature is obtained from the person receiving and
                    acknowledging the delivery. National deliveries are made by our courier company who also acquire a
                    signature from the receivers. Once a delivery has been made customers will receive an
                    acknowledgement via email or text providing an update on the status of their delivery.
                </p>
                <!--<div>
                    <a href="">Learn More</a>
                </div>-->
            </div>
        </div>
    </div>
    <!--<div class="ContentSection">
        <div class="contentImage">
            <img src="{{env.assetsPath}}assets/img/seviceImages/Connaught-Navy.jpg" alt="">
            <img src="{{env.assetsPath}}assets/img/seviceImages/Prosecco Blouse-Pink.jpg" alt="">
        </div>
        <div class="ContentText">
            <div>
                <h1>OUTERWARE </h1>
                <p>Lorem ipsum,dolor sit amet consectetur adipisicing elit. Nemo voluptate ab explicabo,enim eum,repellat
                    deleniti nam expedita accusantium,quam ullam ut. Dolorem fugit maxime incidunt exercitationem 1500
                </p>
                <div>
                    <a href="">Learn More</a>
                </div>
            </div>
        </div>
    </div>
    <div class="ContentSection">
        <div class="contentImage content-order-2">
            <img src="{{env.assetsPath}}assets/img/seviceImages/Aldwych-Navy.jpg" alt="">
            <img src="{{env.assetsPath}}assets/img/seviceImages/Cassino-Jkt-Mid-blue.jpg" alt="">
        </div>
        <div class="ContentText ContentSectionplue content-order-1">
            <div class="ContentSectionplue">
                <h1>CONCEPT </h1>
                <p>Lorem ipsum,quam ullam ut. Dolorem fugit maxime incidunt exercitationem 1500
                </p>
                <div>
                    <a href="">Learn More</a>
                </div>
            </div>
        </div>
    </div>-->
</div>
<!--<div class="servicefooter">
    <div class="servicefooterContent">
        <div class="heading2">
            <div fxLayout="column" fxLayoutAlign="start start" fxLayoutGap="8pt">
                <h1>Why TWC?</h1>
                <div class="lineH1"></div>
            </div>
        </div>
        <p>Lorem ipsum dolor sit amet consectetur,adipisicing elit. Nam quibusdam,iste numquam praesentium sint,nulla
            quasi,cum nemo totam quia porro voluptates alias possimus vero reiciendis eum nostrum eveniet reprehenderit
            maxime? Neque architecto asperiores velit dolor molestias expedita illo blanditiis! Quae obcaecati accusamus
            velit hic voluptas architecto,ex quaerat ipsam.
        </p>
    </div>
</div>-->
<app-top-brands></app-top-brands> ```

提前致谢！