web-dev-qa-db-ja.com

Angular 7/8-アプリコンポーネントでURLパラメータを取得する方法

私は適切なシングルサインオンを持っていますが、テストのためにURLから値を読みたいですlocalhost:4200/?id=test&name=testing&[email protected]をアプリコンポーネントのAPIに渡します。

シングルサインオン機能を使用する代わりに、URLから読み取るフラグが存在します。

if (url_enabled == true) {
    getParamsFromUrl()
 } else {
   singleSignOn()
 }

ActivatedRouteを試しましたが、動作していないようです。

私が試してみました queryParams, params, url, queryParamsMapしかし、これらはどれも機能していないようです。私が得るすべては空の値です。

アプリコンポーネント内

app.component.ts

 getParamsFromUrl() {
    this._router.events.subscribe((e) => {
      if (e instanceof NavigationEnd) {
        console.log(e.url)
      }
    })
  }

 this.route.queryParams.subscribe(params => {
      console.log(params);
    })

app.component.html

<router-outlet></router-outlet>

app-routing.module.ts

const routes: Routes = [
  {path:'*/:id', component: AppComponent},
];

私は、stackoverflowや他のブログで見つけたものは何でも試しました。ここで何が欠けているのか誰かが指摘できますか？

node.jsangulartypescriptecmascript-6angular8
3
Lovika

このように試すことができます

constructor(
  private activatedRoute: ActivatedRoute
)

ngOnInit() {
  this.activatedRoute.paramMap
            .pipe(
               tap(console.log(this.activatedRoute.snapshot.paramMap.get(
                        "id"
                   )))
             ).subscribe()
}

助けが必要な場合はお知らせください

0
Tony Ngo

新しいコンポーネントを作成し、ルーティング構成を次のように更新する必要があります。

まず、新しいコンポーネントを作成します：MainComponent：

import { Component } from '@angular/core';

@Component({
  selector: 'main',
  template: `<router-outlet></router-outlet>`,
})
export class MainComponent {
  constructor() {  }
}

次に、AppModuleを更新します。

import { AppComponent } from './app.component';
import { MainComponent } from './main.component';

@NgModule({
  imports:      [ 
    BrowserModule, 
    FormsModule,
    RouterModule.forRoot([
      {path: '', component: AppComponent}
    ])
  ],
  declarations: [ MainComponent, AppComponent ],
  bootstrap:    [ MainComponent ]
})
export class AppModule { }

最後に、index.htmlファイルを更新する必要があります（AppComponentではなく、新しいコンポーネントをロードしてください）：

<main>loading</main>

これで、AppComponentで要求されたとおりにパラメーターを読み取ることができます。

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  params: Params;

  constructor(private route: ActivatedRoute){}

  ngOnInit() {
      this.route.queryParams.subscribe((params: Params) => {
        this.params = params;
        console.log('App params', params);
        const id = params['id'];
        console.log('id', id);
      });
  }
}

こちらの実際の例をご覧ください： https://read-params-app-component.stackblitz.io/?id=test&name=testing&[email protected] 。

そして、ソースコードを見つけてください here 。

お役に立てば幸いです。

0
luixaviles