Diskuze: Angular 7 router navigation s možnými parametry

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Absolvováno

Označit lekci jako neabsolvovanou

Pokračovat ve výuce

Jak se ti líbí článek?

Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500

Jak se ti kurz líbí?

Tvé hodnocení kurzuZnaků 0 z 50-500

Aktivity

Ladislav Niderle

Člen

Ladislav Niderle:1.3.2019 6:27

Ahoj, potřeboval bych poradit jak udělat možnost, že v rámci routování navigace jsem v jedné podstránce a potřebuji se z ní překliknout na jinou pomocí odkazu nebo v tomto případě tlačítka tak, aby se mi předvyplnily data a pustilo hledání (puštění hledání jsem schopen zařídit), ale abych se do té konkrétní agendy mohl dostat i bez parametru.

Zkusil jsem: Našel jsem příklady, kde bylo u routování napsané 'detail/:id' a v samotné html mělo routerLink="/detail/{{id}}".
Toto bohužel mi nedokázalo zařídit, abych se do té agendy mohl dostat i bez toho vstupního parametru.

Chci docílit: Snažím se dosáhnout toho, aby se z yhledávaného seznamu, která je v jedné componentě byl schopen přepnout do jiné, ale byl schopen využít vstupní parametr, abych obsluze ušetřil čas a hned jí zobrazil potřebná data.

Předem moc děkuji za případnou radu či pomoc.

Odpovědět

1.3.2019 6:27

Tomáš Kubín

Člen

Tomáš Kubín:1.3.2019 8:58

Ahoj,

předpokládám, že řešení:

<a [routerLink]="['/Person', person.id]">Person</a>

ti nevyhovuje, pokud to chceš řešit i nadále předáváním parametrů, tak řekni a zkusíme na něco přijít.

Osobně bych doporučil využít SERVICE, což může působit jako třída SINGLETON a změnu stránky vyvoláš v kódu komponenty a ještě předtím do dané SERVICE si uložíš tvá data v objektu třeba.

Pak na nové stránce jen zavoláš danou SERVICE a získáš data.

Víš jak to myslím?

constructor(
   private dataService: DataService,
       private router: Router
 ) {}

 onPageChange() {
   let data = .... ; {tvuj objekt se vsemi daty, ktere chces prenaset}
       this.dataService.SetData(data);

       //redirect na route se spravnou adresou
       this.router.navigate(["/detail"]);
 }

Nezapomen na importy a dana service, aby byla jen jedinna instance, a data tudiz vsude dostupna, tak je treba ji implementovat treba v app module {hlavnim modulu}

Viz cast app modulu

imports: [
  BrowserModule,
  HttpModule,
  HttpClientModule,
  BrowserAnimationsModule,
  ToastrModule.forRoot(),
  SharedModule,
  RouterModule.forRoot([
    { path: '', component: AppComponent },
    // { path: 'administration', component: AdmMainComponent },
    { path: '*', component: AppComponent }
  ], { useHash: true })
],
providers: [ManagerService, UploadManagerService, DateValidators, {SEM DAS JMENO TVE SERVICE}],
bootstrap: [NewAppMainComponent],
entryComponents: [

Snad jsem ti pomohl.

Nahoru Odpovědět

1.3.2019 8:58

Petr Štechmüller

Tvůrce

Petr Štechmüller:1.3.2019 9:37

Ahoj, jde to zařídit pomocí parametrů Routy.

this._route.params.subscribe(params => this._handleParams(params));

Tohle je přihlášení odběru ke změně parametrů na dané routě.

Potom, když budeš chtít ty parametry měnit, tak se vlastně budeš navigovat jakoby na novou stránku. Změna bude ale pouze v těchto parametrech.

this.formOrderBy.valueChanges.subscribe(change => {
      const orderBy = change['orderBy'];
      this._storage.set('orderBy', orderBy);
      const groupBy = this._route.snapshot.params['groupBy'] || this._storage.get('groupBy') || 'none';
      const orderType = this._route.snapshot.params['orderType'] || this._storage.get('orderType') || 'ascending';
      this._router.navigate([{'groupBy': groupBy, 'orderBy': orderBy, 'orderType': orderType}]);
    });

Takhle to Já používám k nastavení typu řazení záznamů.

V adresním řádků to pak bude vypadat následovně:

http://localhost.lh/…,param2=val2

Nahoru Odpovědět

1.3.2019 9:37

Pokud spolu kód a komentář nekorespondují, budou patrně oba chybné

Naučíme tě pracovat na home-office.

Zjistit více...

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.

Nejčastěji vyhledáváné

Diskuze: Angular 7 router navigation s možnými parametry