Angular 2 RC 4 - hashlocationstrategy 不再工作-6ren

Angular 2 RC 4 - hashlocationstrategy 不再工作

转载作者：太空狗更新时间：2023-10-29 18:07:23

25

4

<分区>

我们已将 Angular 2 项目升级到 Release Candidate 4。

我们正在使用 HashLocationStrategy 来刷新浏览器中的页面(使用 BrowserSync)。但是对于 RC4，这不再有效。没有组件被加载到 routeroutlet 中。但是，使用菜单项的路由链接确实有效。

是 RC4 的 HashLocationStrategy 坏了，还是我们没有正确使用它？我们还没有在互联网上找到任何信息。 (现在只是试图通过 Angular2 源代码找到我们的方式来找出发生了什么)

更新:这是代码。

此外，我们似乎无法找到使默认路由正常工作的方法。尝试了如下所示的空路径，尝试了重定向...似乎没有任何东西会触发将组件加载到路由导出的默认路由。

// boot:

import {bootstrap} from '@angular/platform-browser-dynamic';

import {AppComponent} from './app.component';

bootstrap(AppComponent)
    .catch(err => console.log(err));


// AppComponent:

import {Component, provide, ExceptionHandler} from '@angular/core';
import {HTTP_PROVIDERS, XHRBackend} from '@angular/http';
import {CORE_DIRECTIVES, LocationStrategy, HashLocationStrategy} from '@angular/common';
import {TranslatePipe, TranslateService, TRANSLATE_PROVIDERS} from 'ng2-translate/ng2-translate';

import {SideMenuComponent} from './navigatie/index';
import {AppSettingsService, Auth, MockBackendToggle} from './shared/index';
import {EssStorage} from './shared/ess-storage';
import {EssHttp} from './shared/ess-http';
import {DienstverbandService} from './dienstverband/shared/dienstverband.service';
import {HeaderMenuComponent} from './navigatie/headermenu/headermenu.component';
import {WerknemerService} from './werknemer/werknemer.service';
import {PersoonService} from './werknemer/persoon/shared/persoon.service';
import {RouterOutlet} from '@angular/router';
import {APP_ROUTER_PROVIDER} from './navigatie/routes';
import {AuthGuard} from './shared/auth/auth-guard';
import {EssExceptionHandler} from './shared/ess-exception-handler';


@Component({
    selector: 'ess-app',
    pipes: [TranslatePipe],
    directives: [CORE_DIRECTIVES, SideMenuComponent, HeaderMenuComponent, RouterOutlet],
    providers: [TRANSLATE_PROVIDERS, TranslateService, HTTP_PROVIDERS, EssHttp, WerknemerService, APP_ROUTER_PROVIDER, AuthGuard,
                AppSettingsService, Auth, DienstverbandService, PersoonService, provide(XHRBackend, {useClass: MockBackendToggle}),
                provide(LocationStrategy, {useClass: HashLocationStrategy}), provide(ExceptionHandler, {useClass: EssExceptionHandler})],
    template: `
    <div id='main'>
        <div class='header  hidden-xs' *ngIf="_auth !== undefined && _auth.isLoggedIn()">
            <header>
                <ess-headermenu></ess-headermenu>
            </header>
       </div>

        <div class='ess-sidemenu-container visible-lg' *ngIf="_auth !== undefined && _auth.isLoggedIn()">
            <ess-sidemenu></ess-sidemenu>
        </div>

        <div class='main-content-container col-lg-12'>
            <section> 
                <section id='content'>
                    <div>
                        <router-outlet></router-outlet>
                    </div>
                </section>
            </section>
        </div>
    </div>`
})
export class AppComponent { //..}

// routes:

import {provideRouter, RouterConfig} from '@angular/router';
import {DashboardComponent} from '../dashboard/index';
import {PersonaliaComponent} from '../werknemer/index';
import {LoginComponent} from '../login/index';
import {AuthGuard} from '../shared/auth/auth-guard';

export const appRoutes: RouterConfig = [
    {path: '',                      component: LoginComponent},
    {path: 'login/:url',            component: LoginComponent},
    {path: 'dashboard',             component: DashboardComponent},
    {path: 'personalia',            component: PersonaliaComponent,             canActivate: [AuthGuard]}
];

export const APP_ROUTER_PROVIDER = provideRouter(appRoutes);

更新:

当我通过单击链接并使用 [routerLink] 导航到 View 时，路由器导出会填充正确的组件。例如，当导航到“自动”时。

<li class="submenuitem" [routerLink]="['auto']"><a href="#"><span>{{'AUTO' | translate}}</span></a></li>

但是当我刷新“自动”页面时，路由器 socket 变为空。

25

4

0

文章推荐： python - 确定在 QWERTY 键盘上键入单词的难度

文章推荐： c# - 通过 Visual Studio Automation 设置项目的 OutputPath 属性

文章推荐： python - 以编程方式求解函数方程

文章推荐： html - angular 2包括所有页面通用的css文件

module - `alloc::rc::Rc` 和 `std::rc::Rc` 有什么区别？
我很好奇这两个模块在实践中有什么区别吗？如果不是，为什么会有这两个副本？最佳答案 std::rc::Rc只是 alloc::rc::Rc 的再导出.你可以在src/std/lib.rs中看到整个rc
rust - Rust 中的 Rc::clone(&rc) 和 rc.clone() 之间有什么区别吗？是否有基于此的编译优化？
我注意到 rust 书推荐使用 Rc::clone(&rc)在rc.clone()如下: use std::rc::Rc; let five = Rc::new(5); // recommended
angular - 如何将 Angular 2 RC 1(或更早版本)表单迁移到 Angular 2 RC 2/RC 4 新表单
我需要将我现有的 Angular 2 RC 1 应用程序迁移到 Angular 2 RC 4。作为其中的一部分，我还需要将我现有的表单迁移到 Angular 2 RC 4 New Forms。任何人
selenium-rc - 如何测试 Selenium RC 中哪个元素具有焦点？
如何测试 Selenium RC 中哪个元素具有焦点？最佳答案当我遇到同样的问题时，出于各种原因，其他答案都不适合我。我最终做了以下操作(使用 Java 中的 Selenium 2.0 WebDr
将 Rc 转换为 Rc
Horse是一个实现 Animal 的结构特征。我有一个 Rc和一个需要接收 Rc 的函数, 所以我想从 Rc 转换至 Rc . 我这样做了: use std::rc::Rc; struct Hors
rust - 可以将 std::rc::Rc 与特征类型一起使用吗？
代码如下所示: // Simplified pub trait Field: Send + Sync + Clone { fn name(&self); } #[deriving(Clone)
【Linux基础入门教程】Linux /etc/rc.d/rc.local配置文件用法
在 /etc/rc[06].d/ 目录中的程序启动之后，系统的启动就已经完成。不过，我们总有一些程序是需要在系统启动之后随着系统一起启动的。这时我们并不需要自己把需要启动的服务链接到 /etc/rc3
selenium-rc - 使用 Selenium RC 测试 Flash
我正在使用 selenium rc，我需要测试 flash。我需要单击 Flash 播放器上的允许按钮。我只是需要一些帮助才能开始？最佳答案通常，除非在 Flash 开发人员的帮助下将 Sele
rust - 为什么 std::rc::Rc 需要 PhantomData？
我知道 PhantomData旨在使用数据类型定义中的生命周期或类型参数，否则这些参数将不会被使用。我最近在查看 Rc 的定义在Rust std lib并注意到它似乎使用了 PhantomData ,
rust - 为什么 std::rc::Rc<> 不是 Copy？
谁能给我解释一下为什么Rc<>不是 Copy ？我正在编写使用大量共享指针的代码，并且必须输入 .clone()总是让我心烦意乱。在我看来Rc<>应该只包含一个固定大小的指针，所以类型本身应该是
rust - 如何构建 Rc 或 Rc<[T]>？
我想创建一个 Rc因为我想减少跟踪访问 Rc 的 2 个指针的间接访问需要。我需要使用 Rc因为我确实拥有共享所有权。我在 another question 中详细说明关于我的字符串类型的更具体的问题
selenium-rc - 了解 Selenium IDE 与 Selenium RC
Selenium IDE 和 Selenium RC 的功能有什么区别？最佳答案 Selenium IDE 是一个 firefox 插件，它为您提供了用于记录测试的基本记录器。这些测试使用关键字记录
selenium-rc - 使用 Selenium RC 购买 Paypal-Sandbox
我正在尝试使用 Selenium RC (Java) 在 Paypal-Sandbox 上购买东西，但它不起作用。我用 Selenium IDE (Firefox AddOn) 试过了，它确实有效。
rust - 是否可以将 Rc 映射为 Rc？
我有一个 Rc>但需要得到一个Rc从中。像这样的东西: let rc_option: Rc> = Rc::new(Ok(value)); let ok_value: Rc = rc_option.ma
python - matplotlib.rc 和 matplotlib.pyplot.rc 有什么区别？
我知道在 matplotlib 中，您可以使用 rc 或 rcParams 来自定义绘图的样式。但是，这些函数似乎存在于两个级别，例如 matplotlib.rc 与 matplotlib.pyplo
rust - Rc> 和 RefCell> 有什么区别？
Rust 文档涵盖 Rc>相当广泛，但不涉及 RefCell> ，我现在遇到了。这些是否有效地给出了相同的结果？它们之间有重要区别吗？最佳答案 Do these effectively give
rust - 克隆并返回 Rc 时为 "Expected reference, found struct Rc"
我有一段代码是这样的: use std::cell::RefCell; use std::rc::Rc; struct A(bool); impl A { fn get_ref(&self)
rust - Rc> 和 RefCell> 有什么区别？
Rust 文档涵盖 Rc>相当广泛，但不涉及 RefCell> ，我现在遇到了。这些是否有效地给出了相同的结果？它们之间有重要区别吗？最佳答案 Do these effectively give
rust - "expected struct ` std::rc::Rc `, found reference"- 如何转换？
我试图获得引用计数 Rc从 HashMap 并将其放入不同的容器 ( Vec )。原以为这会起作用(通过增加引用计数)，但我却收到了一个“expected struct std::rc::Rc ,
ubuntu系统中/etc/rc.local和/etc/init.d/rc.local的区别详解
前言我们在ubuntu下要把一个程序加入开机启动，一般可以通过修改rc.local来完成，但ubuntu下有两个rc.local文件。分别是/etc/rc.local和/etc/init.d/r

首页

博学

6Ren·AI

商城

Angular 2 RC 4 - hashlocationstrategy 不再工作