Question

在我的appcomponent中，它包含两个按钮登录和注册，指向相应的组件。在我的注册组件中，当用户输入所有文本字段并单击提交按钮时，所有文本字段都应该消失并显示我的confcomponent中的内容。（我想从signupcomponent导航到confcomponent）

app.component.ts

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
  selector: 'my-app',
  template: `
    <div class="ui buttons">
      <button class="ui button"routerLink="/login"routerLinkActive="active">Login</button>
      <div class="or"></div>
      <button routerLink="/signUp"routerLinkActive="active">SignUp</button>
    </div>   
    <div class="ui form margin-top">
      <router-outlet></router-outlet>
    </div>
  `,
  directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';
import { signUpComponent }    from './signUp.component';
import { loginComponent }    from './login.component';
import { confComponent }    from './conf.component';
const routes: RouterConfig = [
  { path: 'signUp', component: signUpComponent },
  { path: 'login', component: loginComponent },
  { path: 'conf', component: confComponent }
];
export const appRouterProviders = [
  provideRouter(routes)
];

signup.component.ts

import { Component } from '@angular/core';
@Component({
  template: `
    <h5 class="ui header">Admin detail</h5>
    <form>
      <div class="field">
        <input type="text" placeholder="Company Name">
      </div>
      <div class="field">
        <input type="text" placeholder="Admin Name">
      </div>
      <div class="field">
        <input type="email" placeholder="Admin's Email-id">
      </div>
      <div class="field">
        <input type="password" placeholder="Admin's Password">
      </div>
      <div class="field">
        <input type="password" placeholder="Re-enter Password">
      </div>
      <div class="ui warning message">
        <div class="header">Authentication failed!</div>
        <p>Please check your Email-id and Password</p>
      </div>
      <div class="ui animated button" tabindex="0">
        <div class="visible content" routerLink="/conf" routerLinkActive="active">
          Submit and Proceed
        </div>
        <div class="hidden content">
          <i class="fa fa-arrow-right" aria-hidden="true"></i>
        </div>
      </div>
    </form>
  `
})
export class signUpComponent { }

Answer 1

按URl导航

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

this.parentRouter = Router
this.parentRouter.navigateByUrl('/login');

按组件导航

this.router.navigate(['/dashboard']);

http://playcode.org/routing-in-angular-2-rc-1/详细查看此网址希望这有助于您

Answer 2

您可能需要明确地将它们设置为null。在最新的路由器版本（RC.1）中，当单击routerLink或调用router.navigate(...)时，应该默认不传递查询参数和片段。

另见

Answer 3

你可以这样做

 this.router.navigate(['/router']);

Answer 4

只需使用它。在ProdutsList文件中声明app.routing.module

this.router.navigate(['/ProdutsList'])

在router这样的构造函数中添加private router: Router

如何在一个组件中导航到另一个组件而不在angularjs2中携带任何参数（id）？

4 个答案: