Question

我在生产中遇到问题（使用apache的服务器）和路由器组件（角度4.4.6）这是我的代码：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router} from '@angular/router';
import { Routes, RouterModule } from '@angular/router';

@Component({
  selector: 'app-root',
  template: `
        <ng-container *ngIf="router.url !== '/login'">
            <div class="col-12 d-none" id="loader">
                <div class="progress">
                    <div class="indeterminate"></div>
                </div>
            </div>
            <app-menu></app-menu>
            <router-outlet></router-outlet>
        </ng-container>
        <ng-container *ngIf="router.url === '/login'">
            <router-outlet></router-outlet>
        </ng-container>`,
})
export class AppComponent implements OnInit {
    name = 'Angular';
    url: string;
    constructor(
        private route: ActivatedRoute,
        public router: Router
    ) {}

    ngOnInit() {
    }
}

本地版本运行良好但在生产中，都显示了ng-container。我将一个console.log（this.router.url）放在OnInit中，它显示＆＃34; /＆＃34;。但即使价值为＆＃34; /＆＃34;，我的测试 * ngIf =＆＃34; router.url ===＆＃39; / login＆＃39; 也不应该＆＃39 ;是渲染这个部分，但确实如此。

网址重写效果非常好，因为当我输入mydomain.com/login时，我没有404。

有什么想法吗？

谢谢！

Answer 1

固定。有了这个条件 <ng-container *ngIf="router.url !== '/login'"> 当输入域时，容器显示了我的网址尚未重定向到“/ login”的一小段时间。

应用程序崩溃导致我的组件正在使用浏览器当时没有的localstorage。只有在登录确定时才会填写本地存储。

感谢您的帮助！

Answer 2

我建议您通过以下方式更改url：

constructor(private router: Router){
  router
  .events
  .filter(event => event instanceof NavigationStart)
  .subscribe(
    changeEvent => {
      if (changeEvent["url"]) {
        this.url = changeEvent["url"];
      }
    }
  )
}

基于router documentation，我认为通常是处理当前网址的更好方法。

检查您需要的具体Router event - 我猜测NavigationStart是您最好的选择。

另外，尝试使用两个差异named outlet：

<router-outlet name="appoutlet">
...
<router-outlet name="loginoutlet">

并相应地更改路线：

{ path: 'login', component: LoginComponent, outlet: 'loginoutlet' },

Answer 3

也许查看popstateevent：

this.location.subscribe((popStateEvent: PopStateEvent) => {
  if (this.isPopStateEvent(popStateEvent) &&
    popStateEvent.url.startsWith('/login')) {

（位置类型为Location：

import {Location, PopStateEvent} from '@angular/common';

）

router.url不在生产中

3 个答案: