Erstellen und Bearbeiten von Operationen in Winkel

Question

ich bin eine Komponente in angular 5 Implementierung, die mein foo-Objekt erstellen und es funktioniert gut, aber danach will ich es bearbeiten, so dass ich zeige den Bearbeitungspfad zu derselben Komponente:

const routes: Routes = [ 
    ... 
    { path: 'foo/new', component: NewFooComponent }, 
    { path: 'foo/edit/:id', component: NewFooComponent }, 
    ... 
]; 

meine Frage ist, wie man in meinem NewFooComponent.ts weiß, wenn ich im foo/new Weg oder in foo/edit/:id bin?

Und ist es auch der beste Ansatz?

Answer 1

Was würde ich tun Einstellung ist wie new oder edit als param und überprüfen params mit ActivatedRoute

Also werde ich die Routen wie folgt aufgebaut:

const routes: Routes = [ 
    ... 
    { path: 'foo/:state', component: NewFooComponent }, 
    { path: 'foo/:state/:id', component: NewFooComponent }, 
    ... 
]; 

und überprüfen, indem

tun

constructor(public activatedRoute: ActivatedRoute) { } 

ngOnInit() { 
    this.activatedRoute.params.subscribe(
     params => { 
     if(params['state'] === 'new') { ... } 
     else {...} 
     } 
    ); 
} 

Answer 2

Verwenden Sie die ActivatedRoute, um die Router-Parameter durch die ID id zu erhalten Eigenschaft besteht in dem Pfad

constructor(private route:ActivatedRoute){} 

ngOnInit(){ 
    // 'id' is the name of the route parameter 
    if (this.route.snapshot.params['id']) { .... }; 
    else { ... } 
} 

Answer 3

Ich denke, dass eine schlechte Design-Entscheidung ist, Ihre NewFooComponent jetzt die Erstellung und die Bearbeitung von etwas tut, und dass die SRP verletzen, vielleicht sollten Sie eine dedicate Komponente für das Erstellen Bearbeiten und teilen Sie die Vorlage, wenn dies die Duplizierung ist, die Sie vermeiden möchten, indem Sie nur eine Komponente erstellen.