Question

我的情况是我的顶级导航来自服务，并且通过DOM将[routerLink]注入我的所有菜单中并不理想。

我正在使用Angluar 4.0。以前的帖子必须是旧的，这些解决方案不再有效，我试过了。

正如我在试过的帖子中提到的那样：

  constructor(
        private router: Router ) {

还尝试了空路线：

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

两者都不起作用。我还能做点别的事吗？

为了测试我在页面上并排显示这些内容。我正在尝试导航到一个组件。见下文我有一个适用于RouterLink，另一个没有。我需要第二个太好用了。该链接重新加载整个页面。

<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的导入包装到专用模块中，然后将该模块注入需要路由的所有应用模块中。 See this example from the doc

此外，我不确定[]是路由器插座标记中路由的正确包装。

编辑：看到您的路线配置，问题来自您用于导航的标签;使用router-outlet代码而不是a代码。

是否需要routerLink？

2 个答案: