Angular переход от одного компонента к другому при нажатии кнопки - PullRequest
Новая
       8

Angular переход от одного компонента к другому при нажатии кнопки

0 голосов
/ 06 апреля 2020

Я хочу перейти от одного angular компонента к другому по нажатию кнопки. У меня есть два компонента app и login. При нажатии кнопки в app.component. html Я хочу перейти к login.component. html. Это то, что я пытался. Хотя URL-адрес изменяется, я не могу увидеть содержимое страницы html.

app.component. html

<div class="row">
        <div class="col-xs-9"></div>
    <div class="col-xs-3">

    <input type="button" class="btn btn-primary pull-right" (click)="onSubmit()" value="Next">

    </div>
</div>

app.routing.module. ts 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LogInComponent } from './components/log-in/log-in.component';

const routes: Routes = [{ path: 'login', component: LogInComponent }];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.ts 

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'; 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private router: Router, ) {}  
    onSubmit() {  
        this.router.navigate(['/login'])  
    }  
    ngOnInit() {}  
}

log-in.component. html

<p>it works</p>

При нажатии кнопки URL-адрес изменяется на / авторизоваться. Однако я все еще вижу пользовательский интерфейс кнопки, и она не работает. Любая помощь будет оценена !! Спасибо заранее.

Ответы [ 2 ]

0 голосов
/ 06 апреля 2020

Есть несколько вещей, которые мне не хватает в вашем коде. Во-первых, app.routing.module необходимо импортировать и зарегистрировать в app.module.ts: 

import { AppRoutingModule } from './app-routing.module';

  imports: [
    BrowserModule,
    AppRoutingModule,
    ...
 ]

С другой стороны, я не вижу розетки маршрутизатора: 

<router-outlet></router-outlet>

Я бы посоветовал вам использовать компонент приложения (app.comp onet. html), например, так: 

<app-navbar></app-navbar> // if you use one
<router-outlet></router-outlet> // this is where the routing happens

В index.html вы ссылаетесь на компонент app.com вот так: 

<body>
  <app-root></app-root>
</body>

Тогда оба варианта, предложенные Кишаном Пателем, должны сработать.

0 голосов
/ 06 апреля 2020

Я думаю, что это будет работать.

Вот ваше решение: 

onSubmit() {  
     this.router.navigateByUrl('/login');
}

Другой способ: 

<button class="nav-item" [routerLink]="['/login']"> Login </button>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...