标签: angular-router

无论如何使用router.navigate将数据作为参数发送？我的意思是,像这个例子,你可以看到路由有一个数据参数,但这样做它不起作用:

this.router.navigate(["heroes"], {some-data: "othrData"})

因为某些数据不是有效参数.我怎样才能做到这一点？我不想用queryParams发送参数.

在Angular 1.x中,我可以执行以下操作来创建一个基本上什么都不做的链接:

<a href="">My Link</a>

但是相同的标签会导航到Angular 2中的应用程序库.

与Angular 2相同的是什么？

编辑:

它看起来像Angular 2路由器中的一个错误,现在github上存在一个未解决的问题.

我正在寻找一个开箱即用的解决方案或确认没有任何问题.

我正在尝试从组件更新(添加,删除)queryParams.在angularJS中,它曾经有可能归功于:

$location.search('f', 'filters[]'); // setter
$location.search()['filters[]'];    // getter

我有一个应用程序,其中包含用户可以过滤,订购等的列表,我想在URL的queryParams中设置所有已激活的过滤器,以便他可以复制/粘贴URL或与其他人共享.

但是,每次选择过滤器时,我都不希望重新加载页面.

这是新的路由器吗？

我的问题非常经典.我有一个应用程序的私有部分,后面是一个login form.登录成功后,它将转到管理应用程序的子路由.

我的问题是我无法使用,global navigation menu因为路由器试图在我AdminComponent而不是我的路由AppCompoment.所以我的导航打破了.

另一个问题是,如果有人想直接访问URL,我想重定向到父"登录"路由.但我不能让它发挥作用.在我看来,这两个问题是相似的.

知道如何做到这一点？

我正在使用角度5.我有一个仪表板,我有几个部分内容很少,几个部分内容如此之大,以至于我在更换路由器时遇到问题.每次我需要滚动到顶部.任何人都可以帮助我解决这个问题,以便当我更改路由器时,我的视图始终保持在顶部.

提前致谢.

我是角色4的新手.我想要实现的是为我的应用程序中的不同页面设置不同的布局页眉和页脚.我有三种不同的情况:

1. 登录,注册页面(无标题,无页脚)

路线:['登录','注册']

2. 营销网站页面(这是根路径,它有一个页眉和页脚,大多数这些部分在登录前到来)

路线:['','关于','联系']

3. 应用程序登录页面(我在本节中对所有应用程序页面都有不同的页眉和页脚,但此页眉和页脚与市场营销网站页眉和页脚不同)

路线:['仪表板','个人资料']

我通过在路由器组件html中添加页眉和页脚来临时运行应用程序.

请告诉我一个更好的方法.

这是我的代码:

应用程序\ app.routing.ts

   const appRoutes: Routes = [
        { path: '', component: HomeComponent},
        { path: 'about', component: AboutComponent},
        { path: 'contact', component: ContactComponent},
        { path: 'login', component: LoginComponent },
        { path: 'register', component: RegisterComponent },
        { path: 'dashboard', component: DashboardComponent },
        { path: 'profile', component: ProfileComponent },


        // otherwise redirect to home
        { path: '**', redirectTo: '' }
    ];

    export const routing = RouterModule.forRoot(appRoutes);

app.component.html

<router-outlet></router-outlet>

应用程序/家/ home.component.html

<site-header></site-header>
<div class="container"> …

我有一个带有一个路由器插座的Angular2应用程序,根据侧面菜单中单击的链接显示不同的组件.

主要组件的标记包含这样的<router-outlet>外观

<div *ngIf="authenticated == false">
  <app-login></app-login>
</div>
<div *ngIf="authenticated">
  <div class="page home-page">
    <header class="header">
      <app-navbar></app-navbar>
    </header>
    <div class="page-content d-flex align-items-stretch">
      <div class="sidebar-container">
        <app-sidebar-menu></app-sidebar-menu>
      </div>
      <div class="content-inner">
      <app-page-header></app-page-header>
        <div id="sub-content">
          <router-outlet></router-outlet>
        </div>
        <app-footer></app-footer>
      </div>
    </div>
  </div>
</div>

如果我单击演示链接,将演示演示组件,但如果我单击Home链接,则主组件将呈现在DOM中的演示组件上方.点击它们几次将产生这样的DOM

<div _ngcontent-c0="" id="sub-content">
    <router-outlet _ngcontent-c0=""></router-outlet>
  <app-home _nghost-c6="">...</app-home>
  <app-demo _nghost-c7="">...</app-demo>
  <app-home _nghost-c6="">...</app-home> <!-- Why so many here? Should be just either one <app-home> or <app-demo>  -->
  <app-demo _nghost-c7="">...</app-demo>
  <app-home _nghost-c6="">...</app-home>
  <app-demo _nghost-c7="">...</app-demo>
  <app-footer _ngcontent-c0="" _nghost-c5="">...</app-footer>
</div>

路线定义为 …

我正在从Angular 4.0.0升级到Angular 5.2.6

我正面临一些问题,让懒惰的模块加载工作.

使用角4.0.0,它工作正常,但现在,5.2.6,我点击我的重定向按钮时出现这样的错误:

core.js:1448 ERROR Error: Uncaught (in promise): TypeError: undefined is not a function
TypeError: undefined is not a function
    at Array.map (<anonymous>)
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:27), <anonymous>:13:34)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6558)
    at SystemJsNgModuleLoader.load (core.js:6542)
    at RouterConfigLoader.loadModuleFactory (router.js:4543)
    at RouterConfigLoader.load (router.js:4523)
    at MergeMapSubscriber.eval [as project] (router.js:2015)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
    at Array.map (<anonymous>)
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:27), <anonymous>:13:34) …

我正在使用Angular 7并面临一个问题=>登录后,API GET调用成功,组件也接收数据,但UI没有显示该数据.

当我打开浏览器控制台时,会立即在UI上填充数据并在控制台中显示警告.

"core.js:15686在Angular区域外触发导航,您是否忘记调用'ngZone.run()'？"

我已经搜索了这个警告并找到了一些解决方法,并在其中this.ngZone.run()调用我的API.

但问题是,我使用了40多个组件,并在每个组件中调用了这么多API.所以我必须调用ngZone.run()每个API调用,这似乎很难做到.

请建议我更好的方法来克服这个问题.提前致谢.

app.component.ts

getEmployees(): void {
    this.employeeService.getEmployees().subscribe(e => {
        this.employees = e;
    });
}

app.service.ts

@Injectable()
export class EmployeeService {
    constructor(private httpClient: HttpClient) { }

    getEmployees() {
        return this.httpClient.get<EmployeeModel[]>('employees');
    }

我正在尝试在我的 Angular 7 应用程序中使用带有 href 的锚标记。当我点击链接时，浏览器中的 url 会发生变化，但无法导航到该页面。如果我把 target="_self" 这样就可以了

<a href="/abcd" target="_self">Abcd</a>

但这不仅适用于浏览器中的 url 更改，而且没有任何反应

<a href="/abcd">Abcd</a>

好像我使用 Angular 路由并使用 RouterLink 一样工作。

<a routerLink="/abcd" routerLinkActive="active">Abcd</a>

谁能解释一下这种行为。