Question

我创建了一个有角度的应用程序，我有一个欢迎页面＆＃34;组件设置为默认路由，因此当用户访问该站点时，它是第一个弹出的组件。在该组件中，我有链接需要激活应用程序组件中的router-outlet。看到＆＃34;欢迎页面组件＆＃34;被路由器插座拉入我认为我必须使用服务来检测点击的链接并更新应用程序组件中的路由，因为两个组件之间没有任何明确的通过它通过它。

我创建了一个看起来像这样的服务文件

@Injectable()

export class RouteService{

    public clickedLink: Subject<string> = new Subject<string>();

    setLink(link: string){ this.clickedLink.next(link); }
}

我修改了我的＆＃34;欢迎页面组件＆＃34;看起来像这样

export class WelcomePageComponent {

    constructor(private RS: RouteService ){}

    sendLink(link: string){ this.RS.setLink(link); }
}

然后将模板中的链接修改为此

<a (click)="sendLink('/illustration')"></a>

然后在app组件中我有了这个

export class AppComponent implements OnInit {

    pageLink: string;

    constructor( private RS: RouteService, private router: Router ){}

    ngOnInit(){
       this.RS.clickedLink.subscribe(link => this.pageLink = link); 
    }

    pageNav(link:string){ this.router.navitgate(link); }
}

现在我一直在搞清楚如何触发pageNav()功能来更新路线。我试着听@HostListener变量和pageLink变量以及一点点可观察量，但我似乎找不到与我想要达到的相关的东西。任何人都可以帮忙吗？

更新

我的app.module看起来像这样

@NgModule({
  declarations: [
      AppComponent
  ],
  imports: [
      BrowserModule,
      AppRoutingModule,
      PagesModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

PagesModule是我为我的＆＃34;页面组件启动的模块＆＃34;看起来像这样

@NgModule({
    imports: [ BrowserModule ],
    declarations: [
        WelcomePageComponent, IllustrationPageComponent
    ],
    exports: [
        WelcomePageComponent, IllustrationPageComponent
    ]
})

export class PagesModule{}

AppRoutingModule看起来像这样

export const routes: Routes = [
    { path: '', redirectTo: '/welcome', pathMatch: 'full' },
    { path: 'welcome',      component: WelcomePageComponent },
    { path: 'illustration', component: IllustrationPageComponent }
]

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

export class AppRoutingModule {}

Answer 1

您可以通过以下步骤解决问题：

目前，已经通过订阅clickedLink听取了点击。单击链接时，将新链接保存在＆＃34; pageLink＆＃34;但你可以做更多的行动（例如调用pageNav（））。

如果您直接调用pageNav（链接），则不再需要pageLink。

this.RS.clickedLink.subscribe(link => { this.pageNav(link); });
请确保对＆＃34; RouterService＆＃34;使用单件服务。具有不同的实例将不允许您跨组件发出事件。为此：仅在组件的父模块上提供服务。（将其从组件提供商列表中删除）

router.navigate（）需要数组因此您可以像这样使用它：this.router.navigate([link]);

Answer 2

我不确定如果我完全理解您的问题，但角度路由非常容易配置和实现。只需将routerLink指令添加到任何元素，它将在点击时更新路由器插座。这是一个例子

<nav>
    <a routerLink="/dashboard">
       dashboard
    </a>
    <a routerLink="/path-to-another-component">
       new componenet
    </a>
</nav>

路由器链接指令调用场景后面的角度路由服务，检查路由器配置是否找到要渲染的组件并更新路由器插座。

这里没有必要观察。我希望能帮助你。

如何通过Angular中的服务激活路由？

2 个答案: