метод маршрутизации, не перенаправляющий на целевой компонент - PullRequest
Новая
       17

метод маршрутизации, не перенаправляющий на целевой компонент

0 голосов
/ 19 мая 2018

У меня проблема с использованием метода маршрутизации навигатора угловой.У меня есть два компонента: LoginComponent и HomeComponent.Когда я нажимаю кнопку в "login.component.html", я хочу перенаправить на "home.component.html".

  • app.module.ts 

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {path: 'home', component: HomeComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule, RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

  • login.component.html 

 <button class="btn btn-primary" (click)="goHome();" class="clickable">Home</button>
  • home.component.html 

<p>
  home works!
</p>

URL-адрес изменяется, но остается на той же странице компонента.

  • login.component.ts 

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(private router:Router) { }

  ngOnInit() {
  }

   goHome() {
    this.router.navigate(['home']);
  }
}

Ответы [ 2 ]

0 голосов
/ 19 мая 2018

Если вы хотите загрузить несколько маршрутов в свой шаблон, вы можете использовать в своем шаблоне app.component: 

 <router-outlet> <router-outlet>

Если вы хотите загрузить вложенные маршруты, попробуйте использовать: 

constructor(private routes: ActivatedRoute) {}
|
|
|
this.route.navigate(['home'], {relativeTo: this.routes});

и используйте директиву routerLink в вашем теге, а затем пройдите маршрут, который вы указали в своем пути

надеюсь, что это полезно.

0 голосов
/ 19 мая 2018

Сделайте эти дополнения:

<button class="btn btn-primary" (click)="goHome();" class="clickable">Home</button>

    goHome() {
    this.router.navigate(['home']);
  }

или через <a>. 

<a [routerLink]="['/home']">home</a>

При необходимости удалите /, если вы намереваетесьвместо этого добавляется к текущему маршруту.

...