Перейдите на другую страницу с кнопкой в угловом 2

Я пытаюсь перейти на другую страницу, нажав кнопку, но он не работает. В чем может быть проблема. Теперь я изучаю угловой 2, и теперь это немного сложно для меня.

//Routes/Path in a folder call AdminBoard

export const AdminRoutes: Routes =[

  {
    path: 'dashboard',

    component: AdminComponent,
    children: [
      {path: '', redirectTo: 'Home'},
      {path: 'Home', component: HomeComponent},
      {path: 'Service', component: ServiceComponent},
      {path: 'Service/Sign_in', component:CustomerComponent}

    ]

  }

];

//Button is also in a different folder. Click button to navigate to this page           {path: 'Service/Sign_in', component:CustomerComponent}

  <button class="btn btn-success pull-right" ><a routerLink="/Service/Sign_in"> Add Customer</a></button>

Ответы

Ответ 1

Используйте это так, должно работать:

 <a routerLink="/Service/Sign_in"><button class="btn btn-success pull-right" > Add Customer</button></a>

Вы также можете использовать router.navigateByUrl('..') следующим образом:

<button type="button" class="btn btn-primary-outline pull-right" (click)="btnClick();"><i class="fa fa-plus"></i> Add</button>    

import { Router } from '@angular/router';

btnClick= function () {
        this.router.navigateByUrl('/user');
};

Обновить

Вы должны внедрить Router в конструктор следующим образом:

constructor(private router: Router) { }

только тогда вы сможете использовать this.router.

Обновление 2

Теперь, после Angular v4, вы можете напрямую добавить атрибут routerLink на кнопку (как указано @mark в разделе комментариев), как показано ниже -

 <button routerLink="/url"> Button Label</button>

Ответ 2

Вы можете использовать routerLink следующим образом,

<input type="button" value="Add Bulk Enquiry" [routerLink]="['../addBulkEnquiry']" class="btn">

или используйте <button [routerLink]="['./url']"> в вашем случае, для получения дополнительной информации вы можете прочитать весь стек на github https://github.com/angular/angular/issues/9471

другие методы также правильны, но они создают зависимость от файла компонента.

Надеюсь, ваша забота решена.

Ответ 3

 <button type="button" class="btn btn-primary-outline pull-right" (click)="btnClick();"><i class="fa fa-plus"></i> Add</button>


import { Router } from '@angular/router';

btnClick= function () {
        this.router.navigate(['/user']);
};

Ответ 4

Важно, чтобы вы украшали ссылку маршрутизатора и связывались с квадратными скобками следующим образом:

<a [routerLink]="['/service']"> <button class="btn btn-info"> link to other page </button></a>

Где "/service" в этом случае является URL-адресом пути, указанным в компоненте маршрутизации.

Ответ 5

Вы можете изменить

    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
на уровне компонентов в конструкторе, как показано ниже

    constructor(private router: Router) {
            this.router.routeReuseStrategy.shouldReuseRoute = () => false; 
}

Ответ 6

Кажется, у меня нормально работает ссылка на кнопку роутера:

<button class="nav-link" routerLink="/" (click)="hideMenu()">
     <i class="fa fa-home"></i> 
     <span>Home</span>
</button>