是否需要routerLink？

Question

我在一个场景中，我的顶级导航来自服务，通过DOM将routerLink注入到我所有的菜单中并不理想。

我使用的是Angluar 4.0。以前的帖子肯定是旧的，那些解决方案不再有效，我试过了。

正如我尝试过的那些帖子中所提到的：

  constructor(
        private router: Router ) {

我也尝试了空路由：

<a [routerLink]="['/']"></a>
<router-outlet></router-outlet>

两者都不起作用。这里还有什么我能做的吗？

为了测试，我把它们并排放在一页上。我正在尝试导航到一个组件。如下所示，我有一个可以和RouterLink一起工作的，另一个不能。BUt，我需要第二个也工作得很好。该链接将重新加载整个页面。

<li [routerLinkActive]="['link-active']">
          <a [routerLink]="['/ambassadors/leaderboard']">
            <span class='glyphicon glyphicon-star-empty'></span> Leaderboard
          </a>
        </li>

        <li>
          <a href="/ambassadors/leaderboard">
            <span class='glyphicon glyphicon-star-empty'></span> Leaderboard Test
          </a>
        </li>

我的路线是这样的，大使是父母，排行榜是孩子：

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

import { AppComponent } from "./app.component";
import { NotFoundComponent } from "./shared/not-found/not-found.component";
import { LeaderboardComponent } from "./leaderboard/leaderboard.component";
import { NavMenuComponent } from "./components/navmenu/navmenu.component";
import { HomeComponent } from "./containers/home/home.component";
import { UsersComponent } from "./containers/users/users.component";
import { UserDetailComponent } from "./components/user-detail/user-detail.component";
import { CounterComponent } from "./containers/counter/counter.component";
import { ChatComponent } from "./containers/chat/chat.component";
import { ConnectionResolver } from "./shared/route.resolver";



const routes: Routes = [
    {
        path: "",
        redirectTo: "home",
        pathMatch: "full"
      },
      {
        path: "ambassadors",
        children: [
          {
            path: "leaderboard",
            component: LeaderboardComponent,


            data: {
              title: "Leaderboard",
              meta: [
                { name: "description", content: "Xbox Ambassadors Leaderboard" }
              ],
              links: [
                {
                  rel: "canonical",
                  href: "http://blogs.example.com/blah/nice"
                },
                {
                  rel: "alternate",
                  hreflang: "es",
                  href: "http://es.example.com/"
                }
              ]
            }
          }
        ]
      },
      {
        path: "home",
        component: HomeComponent,

        // *** SEO Magic ***
        // We're using "data" in our Routes to pass in our <title> <meta> <link> tag information
        // Note: This is only happening for ROOT level Routes, you'd have to add some additional logic if you wanted this for Child level routing
        // When you change Routes it will automatically append these to your document for you on the Server-side
        //  - check out app.component.ts to see how it's doing this
        data: {
          title: "Home",
          meta: [
            {
              name: "description",
              content: "This is an example Description Meta tag!"
            }
          ],
          links: [
            { rel: "canonical", href: "http://blogs.example.com/blah/nice" },
            { rel: "alternate", hreflang: "es", href: "http://es.example.com/" }
          ]
        }
      },

      {
        path: "counter",
        component: CounterComponent,
        data: {
          title: "Counter1",
          meta: [
            {
              name: "description",
              content: "This is an Counter page Description!"
            }
          ],
          links: [
            {
              rel: "canonical",
              href: "http://blogs.example.com/counter/something"
            },
            {
              rel: "alternate",
              hreflang: "es",
              href: "http://es.example.com/counter"
            }
          ]
        }
      },
      {
        path: "users",
        component: UsersComponent,
        data: {
          title: "Users REST example",
          meta: [
            {
              name: "description",
              content: "This is User REST API example page Description!"
            }
          ],
          links: [
            {
              rel: "canonical",
              href: "http://blogs.example.com/chat/something"
            },
            {
              rel: "alternate",
              hreflang: "es",
              href: "http://es.example.com/users"
            }
          ]
        }
      },
      {
        path: "chat",
        component: ChatComponent,
        // Wait until the resolve is finished before loading the Route
        resolve: { connection: ConnectionResolver },
        data: {
          title: "SignalR chat example",
          meta: [
            {
              name: "description",
              content: "This is an Chat page Description!"
            }
          ],
          links: [
            {
              rel: "canonical",
              href: "http://blogs.example.com/chat/something"
            },
            {
              rel: "alternate",
              hreflang: "es",
              href: "http://es.example.com/chat"
            }
          ]
        }
      },
      {
        path: "lazy",
        loadChildren: "./containers/lazy/lazy.module#LazyModule"
      },

      {
        path: "**",
        component: NotFoundComponent,
        data: {
          title: "404 - Not found",
          meta: [{ name: "description", content: "404 - Error" }],
          links: [
            {
              rel: "canonical",
              href: "http://blogs.example.com/bootstrap/something"
            },
            {
              rel: "alternate",
              hreflang: "es",
              href: "http://es.example.com/bootstrap-demo"
            }
          ]
        }
      }
];

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

谢谢

Answer 1

如果您像这样配置您的路由：

RouterModule.forRoot([
    { path: 'welcome', component: WelcomeComponent },
    { path: 'products', component: ProductListComponent },
    { path: 'products/:id', component: ProductDetailComponent }
    { path: '', redirectTo: 'welcome', pathMatch: 'full'},
    { path: '**', redirectTo: 'welcome', pathMatch: 'full'}
]),

然后，您可以像这样使用routerlink：

<div>
    <nav class='navbar navbar-default'>
        <div class='container-fluid'>
            <a class='navbar-brand'>{{pageTitle}}</a>
            <ul class='nav navbar-nav'>
                <li><a [routerLink]="['/welcome']">Home</a></li>
                <li><a [routerLink]="['/products']">Product List</a></li>
            </ul>
        </div>
    </nav>
    <div class='container'>
        <router-outlet></router-outlet>
    </div>
 </div>

或者，您可以像这样在代码中导航：

  constructor(private _router: Router) {
  }

  onBack(): void {
    this._router.navigate(['/products']);
  }

更新:现在您已经更新了问题，看起来不起作用的代码是：

      <a href="/ambassadors/leaderboard">
        <span class='glyphicon glyphicon-star-empty'></span> Leaderboard Test
      </a>

是的，它将重新加载页面，因为您告诉它导航到外部链接...不是由Angular路由器管理的。

所以对你的问题的简短回答是“是”。在本例中，routerLink是必需的。(或者，您可以使用上面所示的.navigate方法路由代码。)

Answer 2

您可以将路由、Router.forRoot(routes)和RouterModule导入封装到一个专用的modulr中，然后将该模块注入到所有需要路由的应用程序模块中。See this example from the doc

此外，我不确定[]是否为路由器出口标签中的路由提供了正确的包装。

编辑:查看您的路由配置，问题出在您用于导航的标签上；请使用router-outlet标签而不是a标签。