Ich erstellte eine Pull-Anfrage mit der Abfrage-Parameter arbeiten. Ich werde versuchen, alles zu erklären, was ich getan habe.
Der Grund, warum die vorherigen Antworten nicht funktionieren, liegt darin, dass Sie den Router überhaupt nicht verwenden. Sie haben eine umfangreiche App-Komponente ohne Routen erstellt. Um zu beheben, dass wir das Routenmodul verwenden müssen, rate ich Ihnen auch, diese beiden Tutorials zu lesen: Routing und Routing & Navigation.
Zunächst müssen wir Ihre index.html ändern, fügen Sie diese zu Ihrer <head>:
<base href="/">
Siehe here warum es wichtig ist, dass hinzuzufügen.
Dann, da Sie Ihre AppComponent verwenden, um alles anzuzeigen, was wir benötigen, um eine Bedarfskomponente zu erstellen, die wir RootComponent nennen werden. Auf Ihrer index.html ersetzen Sie die <my-app> durch <root>; es wird wie folgt aussehen:
<root>Loading...</root>
Jetzt in Ihrem app Ordner wir zwei Dateien die erste wird root.component.ts erstellen müssen, die wie folgt aussehen:
import { Component } from '@angular/core';
@Component({
selector: 'root',
template: `<router-outlet></router-outlet>`,
})
export class RootComponent {
constructor() { }
}
Schauen Sie, dass wir die <router-outlet></router-outlet> als haben Vorlage, wird Angular unsere Komponenten basierend auf der Route injizieren.
Wir brauchen noch eine weitere Datei zu erstellen, die main.route.ts sein wird, ist es das, was es sieht aus wie:
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
export const mainRoutes: Routes = [
{ path: '', component: AppComponent }
];
export const mainRoutingProviders: any[] = [];
export const routing = RouterModule.forRoot(mainRoutes);
In dieser Datei wir, dass für unsere Basisstrecke sagen, wir unsere AppComponent machen möchten
wir haben unsere neue Dateien erstellt haben, jetzt müssen wir unsere App-Modul über sie sagen, in Ihrem app.module.ts so importieren wir die neuen Dateien und die neue Komponente deklarieren. Wir müssen auch unsere Bootstrap-Komponente ändern:
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {AppComponent} from './app.component';
import {RootComponent} from './root.component'; // we import our new RootComponent
import {ChartModule} from 'primeng/primeng';
import {TooltipModule} from 'primeng/primeng';
import { routing, mainRoutingProviders } from './main.routes'; // We also import our Routes
@NgModule({
imports: [
BrowserModule,
ChartModule,
FormsModule,
mainRoutingProviders, // we also need to import our route provider into the module
ReactiveFormsModule,
routing, // and also import our routes declarations
TooltipModule
],
declarations: [AppComponent, RootComponent], // we declare our new RootCpmponent
bootstrap: [RootComponent] // Notice that we are now using our RootComponent to bootstrap our app
})
export class AppModule {
}
nun mit all dem an Ort und Stelle können wir nun endlich vorbei Parameter unserer App starten, auf dem AppComponent Import der Router, ActivatedRoute und die Params von @angular/router so Ihre AppComponent wird in etwa so aussehen:
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
export class AppComponent implements OnInit, OnDestroy {
private var1: string;
private var2: string;
private sub: Subscription;
constructor(
private route: ActivatedRoute,
private router: Router
) {}
ngOnInit() {
// assign the subscription to a variable so we can unsubscribe to prevent memory leaks
this.sub = this.route.queryParams.subscribe((params: Params) => {
this.var1 = params['var1'];
this.var2 = params['var2'];
console.log(this.var1, this.var2);
});
}
ngOnDestroy() {
this.sub.unsubscribe();
}
...
}
Sie die Pull-Anforderung here
Fabio, genau das habe ich die ganze Zeit versucht herauszufinden. Ich danke dir sehr. Ich bin immer noch ein Neuling, wenn es um Angular 2 geht, also vielen Dank für Ihre wertvolle Zeit, alles zu erklären. Es funktioniert jetzt nicht nur, aber es war eine großartige Lernübung, die der Logik folgt, die Sie beschrieben haben. Gut verdient 50 Punkte für den Ruf. – jjj
@jjj Sie sind herzlich willkommen. Ich bin froh, dass es geholfen hat. –
Eine weitere Frage .... in app.component.ts, muss es beibehalten werden: "Privater Router: Router", in Zeile 65? Sieht so aus, als wäre das ein ungenutzter Parameter nein? – jjj