Html 如何以角度 6 导航到其他页面？

Question

提问by sasi

Im trying to redirect my page from login to another page. Im following this code.

我试图将我的页面从登录重定向到另一个页面。我正在关注此代码。

My login component ts file:

我的登录组件 ts 文件：

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

constructor(private router: Router) {
}

funLogin(mobilenumber){
    this.router.navigateByUrl('registration');
}

In my html Im calling this function in a submit btn,

在我的 html 中，我在提交 btn 中调用了这个函数，

<button class="common-btn btn" (click)="funLogin(mobileNo.value)">Submit</button>

In my app.login.routing file,
 export const loginRouting: Routes = [
{
 path: '', component: DashboardRootComponent, canActivateChild: [],
    children: [
        { path: '', component: DashboardComponent, pathMatch: 'full' },
        { path: 'home', component: HomeComponent },
        { path: 'registration', component: RegistrationComponent },
    ]
   }
  ]

I have tried with "this.router.navigate" & referredlot of links. But it didnt work. Can anyone please tell me where Im going wrong or if you could give me a workingh sample it would be better.

我尝试过“this.router.navigate”和链接的引用。但它没有用。谁能告诉我我哪里出错了，或者如果你能给我一个工作样本会更好。

Answer 1

回答by ganesh045

@sasi.. try like this,

@sasi .. 试试这样，

 <a routerLink="/registration"><button class="btn btn-success" > Submit </button></a>

Update :

更新：

In order to use the routing in your application, you must register the components which allows the angular router to render the view.

为了在你的应用程序中使用路由，你必须注册允许角度路由渲染视图的组件。

We need register our components in App Moduleor any Feature Moduleof it (your current working module) in order to route to specific component view.

我们需要在其中App Module或其中任何Feature Module一个（您当前的工作模块）中注册我们的组件，以便路由到特定的组件视图。

We can register components in two ways

我们可以通过两种方式注册组件

.forRoot(appRoutes)for app level component registration like featuteModules(ex. UserManagement) and componentswhich you want register at root level.

.forChild(featureRoutes)for feature modules child components(Ex. UserDelete, UserUpdate).

you can register something like below,

  const appRoutes: Routes = [
      { path: 'user', loadChildren: './user/user.module#UserModule' },
      { path: 'heroes', component: HeroListComponent },
   ];

  @NgModule({
    imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(
      appRoutes
    )
  ],

.forRoot(appRoutes)用于应用级组件注册 featuteModules（例如 UserManagement）以及components您希望在root level.

.forChild(featureRoutes)用于功能模块child components（例如 UserDelete、UserUpdate）。

你可以注册类似下面的东西，

  const appRoutes: Routes = [
      { path: 'user', loadChildren: './user/user.module#UserModule' },
      { path: 'heroes', component: HeroListComponent },
   ];

  @NgModule({
    imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(
      appRoutes
    )
  ],

P.S :In order to navigate from one component to another, you must include the RouterModulein corresponding Module Imports array from @angular/routerpackage.

PS：为了从一个组件导航到另一个组件，您必须RouterModule从@angular/router包中包含相应的模块导入数组。

You can navigate one to another page in Angular in Two ways. (both are same at wrapper level but the implementation from our side bit diff so.)

您可以通过两种方式在 Angular 中导航到另一个页面。（两者在包装器级别相同，但我们这边的实现有点不同。）

routerLink directive

路由器链接指令

routerLinkdirective gives you absolute path match like navigateByUrl()of Routerclass.

routerLink指令给你绝对路径比赛一样navigateByUrl()的Router类。

 <a [routerLink]=['/registration']><button class="btn btn-success" > Submit </button></a>

If you use dynamic valuesto generate the link, you can pass an arrayof path segments, followed by the paramsfor each segment.

如果dynamic values用于生成链接，则可以传递一个arrayof 路径段，后跟paramsfor 每个段。

For instance routerLink=['/team', teamId, 'user', userName, {details: true}]means that we want to generate a link to /team/11/user/bob;details=true.

例如routerLink=['/team', teamId, 'user', userName, {details: true}]意味着我们想要生成一个链接到/team/11/user/bob;details=true.

There are some useful points to be remembered when we are using routerLink.

当我们使用routerLink.

If the first segment begins with /, the router will look up the route from the root of the app.
If the first segment begins with ./, or doesn't begin with a slash, the router will instead look in the children of the current activated route.
And if the first segment begins with ../, the router will go up one level.

如果第一段以开头/，路由器将从应用程序的根目录查找路由。
如果第一段以开头./或不以斜杠开头，则路由器将查看当前激活路由的子节点。
如果第一段以开头../，路由器将上升一级。

for more info have look here.. routerLink

欲了解更多信息，请看这里.. routerLink

Router class

路由器类

We need inject Routerclass into the component in order to use it's methods.

我们需要将Router类注入到组件中才能使用它的方法。

There more than two methods to navigate like navigate(), navigateByUrl(), and some other.. but we will mostly use these two.

有两种以上的导航方法，例如navigate()、navigateByUrl()和其他一些.. 但我们将主要使用这两种。

navigate():
Navigate based on the provided array of commands and a starting point. If no starting route is provided, the navigation is absolute.
```
 this.route.navigate(['/team/113/user/ganesh']);
```
navigate()command will append the latest string is append to existing URL. We can also parse the queryParamsfrom this method like below,
```
 this.router.navigate(['/team/'], {
    queryParams: { userId: this.userId, userName: this.userName }
 });
```
You can get the these values with ActivatedRoutein navigated Component. you can check here more about paramMap, snapshot(no-observable alternative).
navigateByUrl()
Navigate based on the provided URL, which must be absolute.
```
 this.route.navigateByUrl(['/team/113/user/ganesh']);
```
navigateByUrl()is similar to changing the location bar directly–we are providing the wholenew URL.

navigate()：
根据提供的命令数组和起点进行导航。如果没有提供起始路线，则导航是绝对的。
```
 this.route.navigate(['/team/113/user/ganesh']);
```
navigate()命令将附加最新的字符串附加到现有的 URL。我们也可以queryParams像下面这样从这个方法中解析，
```
 this.router.navigate(['/team/'], {
    queryParams: { userId: this.userId, userName: this.userName }
 });
```
您可以ActivatedRoute在导航组件中获取这些值。你可以在这里查看更多关于paramMap, 的信息snapshot(no-observable alternative)。
navigateByUrl()
根据提供的 URL 进行导航，该 URL 必须是绝对的。
```
 this.route.navigateByUrl(['/team/113/user/ganesh']);
```
navigateByUrl()类似于更改地址栏直接，我们提供了全新的URL。

Answer 2

回答by MD.JULHAS HOSSAIN

I am using angular 7 and I solved it in this way into my project.

我正在使用 angular 7，并以这种方式将其解决到我的项目中。

1.First We need to implement this Modules to our app.module.ts file

1.首先我们需要将这个模块实现到我们的app.module.ts文件中

import { AppRoutingModule} from './app-routing.module';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@NgModule({

  imports: [
    BrowserModule,
    AppRoutingModule, 
    FormsModule,
  ],

})

2.Then Open your.component.html file and then fire a method for navigate where you want to go

2.然后打开 your.component.html 文件，然后触发一个方法来导航你想去的地方

<button class="btn btn-primary" (click)="gotoHome()">Home</button>

3.Then Go your.component.ts file for where you want to navigate. And add this code there.

3.然后转到您要导航的位置的.component.ts 文件。并在那里添加此代码。

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

export class YourComponentClassName implements OnInit {

    constructor(private router: Router) {}

    gotoHome(){
        this.router.navigate(['/home']);  // define your component where you want to go
    }

}

4.And lastly want to say be careful to look after your app-routing.module.ts where you must have that component path where you want to navigate otherwise it will give you error. For my case.

4.最后想说的是小心照顾你的 app-routing.module.ts ，你必须有你想要导航的组件路径，否则它会给你错误。对于我的情况。

const routes: Routes = [
  { path:'', component:LoginComponent},
  { path: 'home', component:HomeComponent },  // you must add your component here
  { path: '**', component:PageNotFoundComponent }
];

Thanks I think, I share all of the case for this routing section. Happy Coding !!!

谢谢我想，我分享了这个路由部分的所有案例。快乐编码！！！

Answer 3

回答by Raj Sappidi

navigateByUrl expects an absolute path, so a leading / might take you to the right page

navigateByUrl 需要绝对路径，因此前导 / 可能会将您带到正确的页面

You could also use navigate and don't need the leading / but the syntax is slightly different as it expects an array for the path

您也可以使用导航并且不需要前导 / 但语法略有不同，因为它需要一个数组作为路径

https://angular.io/api/router/Router#navigateByUrl

Answer 4

回答by Vinodh Ram

<a class="nav-link mt-1" [routerLink]="['/login']"><i class="fa fa-sign-in"></i>&nbsp;&nbsp;Login</a>

Html 如何以角度 6 导航到其他页面？

提问by sasi

回答by ganesh045

回答by MD.JULHAS HOSSAIN

回答by Raj Sappidi

回答by Vinodh Ram

相关推荐

最近更新

标签

Html 如何以角度 6 导航到其他页面？

提问by sasi

回答by ganesh045

回答by MD.JULHAS HOSSAIN

回答by Raj Sappidi

回答by Vinodh Ram

相关推荐

Html Javascript 字符数

Html Twitter Bootstrap 内联表单间距

Html 防止在输入类型编号中输入非数字

Html 固定顶部横幅 + 导航

相关推荐

最近更新

标签