Question

我正在研究让我们在angular2项目中更改页面的功能。

我必须按需要在同一页面中路由不同的组件。但我现在想要创建一个超链接，将我重定向到另一个页面。我无法理解......

老实说，我完全迷失了。我几乎找不到有关它的信息。

我最好的方法是（羞辱我）尝试使用按钮而不是hiperlink html标签：

my_component.ts

<button (click)="redirect()">Socios del VideoClub</button>
....
Export class myComponent{

    constructor(
     private route: ActivatedRoute,
     private router: Router
    ) {}

    redirect(){
        this.router.navigate(['/socios']);
    }

我在 app.routing.ts 中定义了'/ socios'。我也试过了 navigationByUrl 。

他们两个都做同样的事情，在同一页面上进行渲染。

注意：我想按组件重定向（我在组件中注入），所以我不能使用 window.location.href

感谢队友

[EDITED]

app.routing.ts

// Importar componentes y módulos para el routing 
import { Routes, RouterModule } from '@angular/router';

// Componentes
import { SociosComponent } from './socios.component';

// Configuración de las rutas
const appRoutes: Routes = [
  { path: 'socios', component: SociosComponent }
];

export const appRoutingProviders: any[] = [
];

export const routing = RouterModule.forRoot(appRoutes);

Note2 ：我编写了一个索引。这是一个全屏引导转盘。

每张图片的标题都是指向另一页的链接。

我想使用angular的路由来转到这些不同的页面。

我实现了从同一个页面渲染一个组件，它被称为。

我可以使用html hypelink标记渲染另一个静态页面。

但我的问题是当我想使用angular渲染另一个页面时。我想这样做，因为我在这个组件中注入来自服务的模型......

Note3 ：嗯，最后，我做了一个傻瓜。我第一次这样做，所以我希望一切都是正确的。如果没有，请告诉我你们所有人需要的东西，我会改变它。再次感谢：）:)）

Demo plunker

Answer 1

以下是使您的路由按预期工作的一些准则。引用您的plunker app.component中的当前内容应该是一个单独的组件。您当前在app.component中拥有的内容应如下所示：

@Component({
  selector: 'my-app',
  template: `
    <nav>
      <a routerLink="/socios">Socios</a>
    </nav>
    <router-outlet></router-outlet>
  `
})
export class AppComponent {
}

如上所述，app.component中的当前内容构成了一个新组件。我们称之为“LandingPage＆＃34;现在。

然后在您的路线中，您可以定义当用户导航到您的应用时此组件将成为着陆页，如下所示：（app.routing）

import { Routes, RouterModule } from '@angular/router';
import { SociosComponent } from './socios.component';
import { LandingPage }  from './pathHere' // your "new" component

const appRoutes: Routes = [
  { path: '', redirectTo: 'landing', pathMatch: 'full' }, // this will make your component the landing page!
  { path: 'landing', component: LandingPage }
  { path: 'socios', component: SociosComponent }
];

export const routing = RouterModule.forRoot(appRoutes);

因此，这将使您的路由工作正常，这意味着当您单击超链接时，您将被路由到新页面！ :)如上所述，请查看教程和

上的plunker

Tour of Heroes - Routing

在那里，您可以看到相同的设置，具有与路由器链接和路由器插座不同的应用程序组件，与其他组件分开！

导航到另一个页面，保持导航栏可见

1 个答案:

Tour of Heroes - Routing

编辑：工作Plunker