將參數傳遞給Angular 2（RC4）應用程序

-1

我想通過url查詢參數將參數傳遞給我的Angular2應用程序。因此，如果用戶在瀏覽器的地址欄中輸入http://myapp.com?r=www.stackoverflow.com，我希望獲取參數r的值以將其存儲在sessionStorage中並稍後使用它。我不想將這個值從組件傳遞給組件。將參數傳遞給Angular 2（RC4）應用程序

這樣做的正確方法是什麼？我是否需要在我的路線中配置它，如果是這樣，我該怎麼做？

export const routes: RouterConfig = [ 
     { path: ':r', component: LandingComponent }, 
    ....

那沒有工作或我無法弄清楚如何獲得價值。

感謝您的幫助！

來源

2016-08-05 tschuege

你想從瀏覽器URL欄或默認路由中傳遞它們嗎？是關於如何在代碼中添加它們，或者如何在代碼中讀取它們的問題？ –

是我的答案，你在找什麼？ –

@GünterZöchbauer我想從瀏覽器URL傳入參數，所以問題是關於在代碼中讀取它。例如。當用'http://myapp.com?r=www.stackoverflow.com'調用我的應用程序時，我想在啓動時讀取參數'r'的值，然後在某個時候使用它。 – tschuege

我finaly通過得到的文件注入到構造

constructor(@Inject(DOCUMENT) private document: any)

，解決它，然後從

this.document.location.search

這對我的作品得到的參數，如香草JavaScript，但我不知道，如果它適用於Angular2可以運行的所有環境。

來源

2016-09-14 12:58:26 tschuege

你可以傳遞參數的URL這樣

<a [routerLink]="['/about', { foo: 'foo' }]">About</a> 

import { Component , OnInit } from "@angular/core"; 
import { Title } from "@angular/platform-browser"; 
import { ActivatedRoute } from "@angular/router"; 
import { Observable }  from "rxjs/Observable"; 

@Component({ 
    template: "<h1>About page! {{ paramName | async }}</h1>", 
}) 

export class AboutComponent implements OnInit { 
     public constructor(private route: ActivatedRoute) {} 
    public paramName: Observable<string>; 
    public ngOnInit() { 
     // console.log("App component loaded"); 
     this.setTitle("about"); 
     this.paramName = this.route.params.map(params => params["foo"] || "None"); 
    } 
};

來源

2016-08-05 16:26:49

這適用於將參數從一個組件傳遞到另一個組件。我正在努力的是在啓動時傳入參數。所以，當用'http：//myapp.com？r = www.stackoverflow.com'啓動我的應用程序時，我想在啓動時捕獲param'r'的值，然後忘掉它。 – tschuege

這應該是你正在尋找，但'queryParams'而不是'params'。這不是*用於在組件之間傳遞參數。 –

@GünterZöchbauer根據[docs]（https://angular.io/docs/ts/latest/api/router/index/ActivatedRoute-interface.html），RC4上的ActivatedRoute中沒有queryParams。 Params的類型爲Observable - 但是當我訂閱它時，就像'this.activatedRoute.params .map（params => params ['r']） .subscribe（（r）=> {alert} r：「+ r）; }）;'我沒有得到通過URL傳入的值。 'this.activatedRoute.snapshot.params.r'也不包含該值。 – tschuege

已配置的路線是正確的，下面是解決如何獲得查詢參數。

這裏是Plunker!!

export const routes: RouterConfig = [ 
    { path: '', redirectTo: '123', terminal: true }, 
    { path: ':id', component: LandingComponent } 
]; 

    @Component({ 
    selector: 'landing-component', 
    template: ` 
    landing component 
    ` 
    }) 
    export class LandingComponent { 
    id = ""; 
    constructor(private route: ActivatedRoute) {} 

    ngOnInit() { 
    const s: ActivatedRouteSnapshot = this.route.snapshot; 
    this.id = s.params["id"]; 
    console.log(this.id); 
    } 
    }

希望這有助於！

來源

2016-08-05 17:44:14

不知道我是否理解你的權利。這將「主要組件」的值123傳遞給着陸組件。但我想通過瀏覽器的URL傳遞值123。 – tschuege

將參數傳遞給Angular 2（RC4）應用程序

回答

相關問題