标签: angular2-routing

我正在尝试将 Google Maps 插件用于 Nativescript ( https://github.com/dapriett/nativescript-google-maps-sdk ) 和 Angular 2 和 {N}-Angular 路由器。我让它只在 Nativescript 中工作，但是一旦我添加了 Angular 2 和路由器，我就无法让地图显示在 UI 中。

由于<Page>标签没有进入 Angular2 {N} 组件模板，我不能使用xmlns:maps="nativescript-google-maps-sdk"命名空间<Page>来实例化<maps:mapView>

{N} 组件基础知识页面提供了一些指导，但它在我尝试过的方式中不起作用：https : //docs.nativescript.org/ui/ui-with-xml#user-interface-components

关于这样做的正确方法的任何想法是？

app.component.ts

import {Component} from "angular2/core";
import {RouteConfig} from "angular2/router";
import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from "nativescript-angular/router";
import {HomeComponent} from "./pages/home/home.component";

@Component({
    selector: "app-main",
    directives: [NS_ROUTER_DIRECTIVES],
    providers: [NS_ROUTER_PROVIDERS],
    template: "<page-router-outlet ></page-router-outlet>"
})
@RouteConfig([
    { path: "/home", component: HomeComponent, as: "Home", useAsDefault: true },
])
export …

我routerLinkActive在我的主要路由中使用。

<a [routerLink]="/user" routerLinkActive="active">Bob</a>

当 URL 为 时/user，active类会被添加到a标签中，但在主路由下，我还有一些辅助路由，所以当 URL 为 时/user/aa，将删除 active。

我希望当 URL 是/user/aaor 或 时/user/bb，主路由的类active仍然存在。

我该怎么办？

如何在页面刷新时强制导航到“/splash”路线？

如果我发现自己在 '/discover' 并刷新页面，它会保留在那里，但是我更希望应用程序重新从头开始 (/splash)。

const appRoutes: Routes = [
  { path: '', redirectTo: '/splash', pathMatch: 'full' },   
  { path: 'splash'             , component: SplashComponent        },
  { path: 'discover'           , component: DiscoverComponent      },
  { path: 'broadcast'          , component: BroadcastComponent     },
  { path: 'notifications'      , component: NotificationsComponent },
  { path: 'notifications/:key' , component: NotificationComponent  }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

我试图router.navigate在我的父 AppComponent 的OnInit&OnDestroy方法中进行调用，但它似乎被忽略了。

ngOnInit( ) : void {
    this.router.navigate(['splash']); 
}

我还尝试OnDestroy在路由器本身的方法中放置导航调用。

我有以下代码片段

import { Component, OnInit } from "@angular/core";
import { AuthenticationService } from "../shared/services/authentication.service";
import { User } from "./user";
import { UserService } from "./user.service";

@Component({
    templateUrl:'./user.component.html'
})
export class UserComponent implements OnInit{
    user: User;

    constructor(
        private _userService: UserService,
        private _authService:AuthenticationService){
    }

    ngOnInit(){

        let user = this._userService.getUser();

        if(!user){
            this._authService.getLoggedUser().subscribe(
                user => {
                    this.user = user;
                    this._userService.setLoggedUser(user);
                }
            );

            this._userService._loggedUser$.subscribe(
                user => {
                    this.user = user;
                }
            )
        }else{
            this.user = user;
        }
    }
}

这在第一条路由初始化（/user/profile）与else块的情况下工作正常。但是当用户刷新浏览器窗口时，我再次向服务器发出请求并让用户返回并呈现我的 …

如果可以将 path: ' ' 重定向到 path: ':id' ，我正在徘徊？有没有办法实现这一目标？

谢谢你。

{
  path: 'folder',
  children: [
    {
      path: '',
      redirectTo: ':id',
      pathMatch: 'full',
    },
    {
      path: ':id',
      canActivate: [AuthGuard],
      component: DocumentsComponent,
    },
  ]
}

我正在服务中进行 HTTP 调用并将返回数据分配给服务变量。现在，当我尝试访问组件中的服务变量时，它在控制台中记录为未定义。但是，当我将日志代码放入服务本身时它会被记录，但在组件中它不起作用。

下面是我的代码供参考：

英雄服务

import { Injectable }              from '@angular/core';
import { Http, Response }          from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { Hero } from './hero';

@Injectable()
export class HeroService {
heroes: Hero[];
hero: Hero;
gbl: Hero[];

  private heroesUrl = 'SERVICE URL';
  constructor (private http: Http) {}

  getHeroes(): Observable<Hero[]> {
    return this.http.get(this.heroesUrl)
                    .map(this.extractData)
                    .catch(this.handleError);
  }
  private extractData(res: Response) {
    let body = res.json()['data'];
    this.gbl = body;
    return body || { };

  } …

如何在渲染视图之前重定向？

这是我的代码：

constructor(private router: Router) {
  if (/* some condition*/) {
    window.history.back();
  }
}

//OR

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

当前代码在重定向前显示视图？

如何在渲染视图之前重定向？

我为 CanDeactivate 功能添加了以下路由器防护以验证未保存的更改，这对我来说很好用

导出接口 CanComponentDeactivate { canDeactivate: () => Observable | 承诺 | 布尔值；}

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
    constructor( private eventService: EventsService) { }
  canDeactivate(component: CanComponentDeactivate, route?: ActivatedRouteSnapshot,
    currentState?: RouterStateSnapshot,
    nextState?: string) {
      let sub = new Subject();
      if (BaseApiService.callStack.length || UnsavedData.isThereUnSavedData) {
          this.eventService.triggerEvent(CONST.SHOW_DATA_LOSS_MODAL, {
              showDataLossModal: true,
              sub : sub
          });
      }
      return BaseApiService.callStack.length || UnsavedData.isThereUnSavedData ? false : true;
  }
}

但是当我检测到是否有任何未保存的更改时，我会显示一个带有“是”和“否”按钮的对话框。

如果用户单击是，我必须清除未保存的更改并重定向到用户单击的 URL。为此，我必须检查用户想要在 CanDeactivate 函数上重定向的 URL 是什么。

nextState?: string但是每次我都没有定义。

如果我做了任何更改，请纠正我。

目前我有三个不同的模块：

• App 模块 -- 带有 emtpy 一个数组 Root 配置
• 主页模块 - 带有主页 comp 的 '' 路径配置。用于搜索玩家
• 玩家结果模块——显示搜索结果（玩家统计信息或错误页面）

现在在这个玩家搜索模块中，我有一个带有子组件的玩家搜索结果组件。其中一个子组件是一个带有列表的模式。如果我单击此列表项（播放器），它应该“导航”到父组件并更新其视图。但唯一更新的是 url。

有一种解决方法可以window.location.href(url)在导航方法更新 url 后重新加载页面。但我不喜欢变通办法。

父组件几乎看起来像：

export class PlayerSearchResultComponent implements OnInit, AfterViewInit {

 public isLoading = true;
  public searchValue: string;
  public playerResult: PlayerByPlayerTagType;
  public hasNoResultFound = false;
  public clanInfo: ClansByClantagType;

  constructor(private playerSearchService: PlayerSearchService,
              private activatedRoute: ActivatedRoute,
              private clanSearchService: ClanSearchService) {
  }

  ngOnInit(): void {
    this.activatedRoute.params.subscribe((params: Params) => {
      this.searchValue = params['playerId'];
    });
  }

  ngAfterViewInit() {
    this.playerSearchService.getPlayerByPlayerTag(this.searchValue).subscribe(player => {
        this.playerResult = player; …

我知道网上有很多关于这个的帖子，但没有一个让我满意。大多数人建议在每个脚本/css 文件中附加一个 verizon 编号。但这对我来说听起来像是很多工作（项目只是一点点），也许有一些方法可以只对输出文件进行版本控制，我不知道一些 CLI 命令？

我的解决方案基于对新版本号的 API 的简单 ping，当 > 比存储时然后重新加载页面。这是一个棘手的部分 - 甚至location.reload(true)不刷新缓存的角度内容。手动 CTRL+SHIFT+R 可以很好地完成这项工作。如果以编程方式硬重新加载有效，这对我来说就足够了。

我也试过 this.compiler.clearCache();但也没有效果。

提前致谢！:)