Я новичок в Ангуляре. Я использовал querySelector для прокрутки до определенного фрагмента в компоненте. Но в разных браузерах ведет себя по-разному. Я обнаружил, что если я перепишу то же самое с помощью ViewChild, оно может вести себя правильно. Функция newScroll в файле ts использует 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, OnDestroy, AfterViewInit, 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, 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>
<!--<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> ```
Заранее спасибо!
