Angular web 组件和路由

Question

I am doing some angular web components like this example says here .

All web components are displayed fine in the parent app(example: http://localhost:8080/dashboard ) but my current problem is that I have a button in my web component and I need go to the web component profile (example: http://localhost:8080/dashboard/profile ).

I have tried several examples but none worked.

Could someone guide me please? Thank you in advance.

Answer 1

A little of your code would be useful to see what you currently have and what might be wrong with it.

In your dashboard.component.html file you would want to have a button or link element () which links to your router:

<a routerLink="/dashboard/profile">Login</a>

Your app-routing.module.ts should have something along the lines of:

// standard imports
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// importing your component to route to 
import { DashboardProfileComponent } from './dashboardprofile/dashboardprofile.component';

// your route
const routes: Routes = [
  {path: 'dashboard/profile', component: DashboardProfileComponent},
];

// standard
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Don't forget to import your routing module in your app.module.ts. app.module.ts

import { AppRoutingModule } from './app-routing.module';

Answer 2

@beanic I found a workaround by using Inputs and Outputs with the web-component Output you will emit your target path and wrap your inside your web-component tags like:

    <navigation><router-outlet></router-outlet></navigation>

and also add

<ng-content></ng-content>

in web-component where you want your view to be loaded.