[英]Using Angular.When I click the link, I want to open the new page to show, not showing below the link
Using Angular.使用 Angular。 When I click the link, I want to open the new page to show, not showing below the link.当我单击链接时,我想打开要显示的新页面,而不是显示在链接下方。
I tried in app-routing module.ts我在 app-routing module.ts 中尝试过
import{WorksComponent} from './works/works.component';
import { ZenigameComponent } from './zenigame/zenigame.component';
const routes: Routes = [
{path:'works-component',component:WorksComponent,
children:[{path:'zenigame-component',component:ZenigameComponent,}]}];
Then I tried in works.component.ts然后我尝试了works.component.ts
<a routerLink="zenigame-component" routerLinkActive="active">DAY14:ゼニガメ</a>
<router-outlet></router-outlet>
In zenigame.component.ts在 zenigame.component.ts
<p>zenigame works!</p>
It shows like this It shows below the link.它显示如下它显示在链接下方。
I don't want this, When I click the link "DAY14:ゼニガメ", I want it to show "zenigame works."我不想要这个,当我点击链接“DAY14:ゼニガメ”时,我希望它显示“zenigame works”。 on a different page.在不同的页面上。
Like, when you want to search "zenigame" on google.com you click the search button, and the different page opens to show the result of the search.就像,当您想在 google.com 上搜索“zenigame”时,您单击搜索按钮,然后打开不同的页面以显示搜索结果。
Thank you for reading.感谢您的阅读。 Sorry for my poor English.对不起我的英语不好。
This occurs because of the position of your <router-outlet>
is on the same route as your link.这是因为您的<router-outlet>
的 position 与您的链接在同一条路由上。
If you want to separate them, you must move the <router-outlet>
into a separate component.如果你想将它们分开,你必须将<router-outlet>
移动到一个单独的组件中。
First change your app.component.html
to only contain the router-outlet, plus any elements you want to be on all of your pages.首先将您的app.component.html
更改为仅包含路由器插座,以及您希望在所有页面上出现的任何元素。
<router-outlet></router-outlet>
Then, setup your routes, one for the page with your link, and another for your actual page:然后,设置您的路线,一条用于带有链接的页面,另一条用于您的实际页面:
import { Component } from "@angular/core";
@Component({
template: `
<a routerLink="page">Go to page</a>
`
})
export class LinkComponent {}
import { Component } from "@angular/core";
@Component({
template: "<h1>Page Works!</h1>"
})
export class PageComponent {}
and in your module with your routes:并在您的模块中使用您的路线:
const routes: Routes = [
{
path: "",
component: LinkComponent
},
{
path: "page",
component: PageComponent
}
];
@NgModule({
imports: [BrowserModule, FormsModule, RouterModule.forRoot(routes)], //setup the routes
declarations: [AppComponent, HelloComponent, LinkComponent, PageComponent], // declare the components
bootstrap: [AppComponent]
})
export class AppModule {}
And that's it.就是这样。 You now have a "template" that is included on all pages in your app.component.html
and each other "page" is a separate view which will be included after the <router-outlet>
现在,您的app.component.html
的所有页面上都包含一个“模板”,并且每个“页面”都是一个单独的视图,将包含在<router-outlet>
之后
Possible duplicate Angular 2 Routing run in new tab可能重复Angular 2 路由在新选项卡中运行
I'd suggest the following:我建议如下:
<a target="_blank" routerLink="zenigame-component" routerLinkActive="active">DAY14:ゼニガメ</a>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.