html - Angular7 - Appcomponent içinde parametreye erişim

Uygulamam, stil ve dom'u belirlemek için bir marka kodu gerektiriyor.

şu anda URL'm yüklendiğinde www.SiteName.com/HBL olacaktır (HBL=markaAdı)

Sadece bir başlık, altbilgi ve arama bileşeni olan basit bir site.

ama marka bilgilerini servis API'sinden almam gerekiyor.

Yani Appcomponent.ts içinde, ActivatedRoute'u enjekte ettim ve ngOnInit yönteminde paramMap'e abone oldum.

Uygulamayı yüklediğimde null parametre değeri alıyorum.

Bu yaptığım şey

my app.component.html:

<div class="container">
  <header [brand]="brand"></header>
  <!-- <esw-search></esw-search> -->
  <router-outlet></router-outlet> - Search will be populated thru route 
  <esw-footer></esw-footer>
</div>

Yönlendiriciden kaçınabilirdim ama bazen arama sayfasına doğrudan erişilebilir.

www.SiteName.com/HBL/search?trackingnumber=123456;language=en gibi

benim yönlendirme bileşenim:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { NotFoundComponent } from './notfound/notfound.component';
import { SearchComponent } from './tracking-search/search/search.component';

const routes: Routes = [
  { path: '', component: SearchComponent },
  { path: ':brandName/search', component: SearchComponent },
  { path: ':brandName/', component: SearchComponent },
  { path: '404', component: NotFoundComponent },
  { path: '**', redirectTo: '404' }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule { }

my appcomponent.ts kodum:

@Component({
  selector: 'esw-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'logistics-tracking-ui';
  apiUrl: string;
  brand: Brand;

  constructor(
    private tracking: TrackingService,
    private route: ActivatedRoute) {
  }

  ngOnInit(): void {

    this.route.paramMap.subscribe(params => {
      const brandName = params.get('brandName');
      this.tracking.getBrandData(brandName).subscribe((response) => this.brand = response);
    });
  }
  }
}

AramaBileşeni.htm:

<div class="card-body">

  <div class="card mx-auto">
    <div class="card-body">
      <h3 style=" text-align: center"> Track your International Package</h3>
      <div>
        <span class="ui-float-label">
          <input [(ngModel)]="trackingNumber" id="float-input" type="text" size="30" pInputText>

          <label for="float-input">Tracking Number</label>

        </span>
        <button pButton type="button" label="Click" (click)="searchTracking()"></button>
      </div>
      <esw-search-details [trackingDetails]='trackingDetails$'></esw-search-details>
    </div>
  </div>

</div>

searchComponent.ts:

@Component({
  selector: 'esw-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {
  trackingNumber = '';
  trackingDetails$: Observable<any>;

  constructor(private trackingservice: TrackingService) { }

  ngOnInit() {
  }

  searchTracking(): void {
    alert('Search Clicked' + this.trackingNumber);
    if (!this.trackingNumber.trim()) {
      // if not search term, return empty hero array.
      // Publish error message
      console.log('Invalid Input');
      return;
    }

    this.trackingDetails$ = this.trackingservice.getTrackingDetails(this.trackingNumber, 'en-GB');


  }

Not: Search & searchDetails bileşenine çok fazla mantık eklemedim.

Benim sahip olduğum sorunlar:

1. App bileşeninde marka parametreleri değerine erişin.
2. app.component.html içinde düzen tanımlamak için bu doğru yaklaşım mı?
3. Bunun için kullanabileceğim daha iyi bir yaklaşım var mı?

Üzgünüm, bu benim ilk Angular projem, her türlü yardım takdir edilecektir.

Cevap #1

Parametre için bir rota eklemeniz gerekebilir ve bunun, rotalar listesinin en başına eklenmesi gerekir, şöyle ki

const routes: Routes = [
  { path: ':brandName/:brand', component: SearchComponent },
  { path: ':brandName/search', component: SearchComponent },
  { path: ':brandName/', component: SearchComponent },
  { path: '404', component: NotFoundComponent }, 
  { path: '', component: SearchComponent },
 { path: '**', redirectTo: '404' }
];

ve şimdi uygulama bileşeninde ona şu şekilde erişebiliriz:-

 this.route.paramMap.subscribe(params => {
      const brandName = params['brand']
      this.tracking.getBrandData(brandName).subscribe((response) => this.brand = response);
    });

Cevap #2

Eğer ihracat/içe aktarmaları geçirme yolunu tercih etmek istiyorsanız, JS'in eşzamansız yüklenmesine dikkat etmeniz gerekir. API çağrınızın, ihracat ve ithalatlarınızın doğru şekilde ayarlandığını varsayarsak, API çağrısı tamamlanır ve marka, başlık bileşeni yüklendikten sonra doldurulur (API çağrısı tamamlandıktan sonra uygulama bileşenine console log ekleyerek doğrulayın. Başlık yüklendikten sonra logun kaydedildiğini göreceksiniz; bu da başlık bileşeninin ngOnInit metodunun erişememesi anlamına gelir). Bu nedenle, gerekli öğeye sahip olana kadar yüklemeyi engelleyebilirsiniz:

<header *ngIf="ReturnedObject.brand" [brand]="brand"></header>

Veya öğeyi sayfa yüklendikten sonra Ng yaşam döngüsü kancaları gibi kullanarak yükleyebilirsiniz

ngAfterContentInit(){}

(bu harika bir seçenek değil çünkü sayfanız varsayılan marka ile yüklenecek, ardından marka güncellendiğinde tekrar yüklenecek)

tercih ettiğim yöntem

İhtiyacınıza göre bir öğenin sınıfını dinamik olarak adlandırmak için "{{}}" notasyonunu kullanabilirsiniz ve başka bir bileşeni yüklemek için bir ihracat göndermek yerine sınıfı üst bileşende ayarlayın, sonra alt bileşeni yükleyin:

(çocuk css'inizde)

.texas {
background-image: texasFlag.png;
}
 .newYork {
background-image: newYorkFlag.png;
}

(ebeveyn html’inizde)

<header class="{{ReturnedObject.brand}}"></header>
<your-child-component></your-child-component>
<footer class="{{ReturnedObject.brand}}"></footer>

Böylece, sınıf çocuk yüklenmeye başlamadan önce ebeveyn tarafından zaten ayarlanır ve ebeveyn ile çocuk bileşeninizin yüklenmek için yaptığı "yarışı" ortadan kaldırır.