标签: angular-router

我的问题是我有一个lang.component装载<router-outlet>.我需要的是访问根组件中的ActivatedRoute参数,app.component但是所有路由数据都是空的.我可以lang.component通过订阅params链接到你可以运行的代码来正常访问路由数据:https://plnkr.co/edit/gTXPUb6TvatbMyOPPRKj

如果您运行代码并打开控制台,则可以看到两个日志.它会告诉你问题所在.

请帮忙.

谢谢.

我正在使用Angular 4，这是我需要捕获该路由已更改并重新加载页面的组件之一中的代码。

ngOnInit() {
        this.router.events.subscribe((value) => {
          if (value instanceof NavigationEnd) {
             console.log(value);
          }
        });
    }

我的问题是我在一条路线上遇到多个“ NavigationEnd”事件。对于某些路由console.log，甚至可以写6,7个值。

那怎么可能发生？

我的情况:

我有一个组件显示tile,每个tile表示一个数组中的对象,该数组通过ngfor循环.单击一个图块时,我想将该对象传递给另一个组件,该组件负责在可以修改的字段中显示该对象的所有属性.

我尝试过的:

在做了一些研究并发现多个帖子向我展示了如何为父子层次结构实现这一点以及一些帖子解释为了实现想要的功能需要使用共享服务,我决定尝试设置这样的服务.

然而,我似乎没有得到的是当我应该导航到不同的路线.似乎导航在早期找到了位置,因为在详细信息组件中检索它时,传递给服务的对象是未定义的.

我的代码:

显示切片的组件具有以下功能,可将单击的对象传递给共享服务:

editPropertyDetails(property: Property) {
    console.log('Edit property called');

    return new Promise(resolve => {
      this.sharedPropertyService.setPropertyToDisplay(property);
      resolve();
    }).then(
      () => this.router.navigate(['/properties/detail'])
    )
  }

共享服务具有设置属性对象的功能和检索它的功能,如下所示:

@Injectable()
export class SharedPropertyService {
  // Observable
  public propertyToDisplay = new Subject<Property>();

  constructor( private router: Router) {}

  setPropertyToDisplay(property: Property) {
    console.log('setPropertyToDisplay called');
    this.propertyToDisplay.next(property);
  }

  getPropertyToDisplay(): Observable<Property> {
    console.log('getPropertyToDisplay called');
    return this.propertyToDisplay.asObservable();
  }
}

最后是必须接收被单击的对象但获取未定义对象的detail组件:

export class PropertyDetailComponent implements OnDestroy {

  property: Property;
  subscription: Subscription;

  constructor(private sharedPropertyService: SharedPropertyService) {
        this.subscription = this.sharedPropertyService.getPropertyToDisplay()
          .subscribe(
            property …

我知道这是一个常见的问题,但实际上我没有找到满足我需求的任何答案......

我有一个angular5像这样的路由配置的应用程序:

const routes: Routes = [
{ path: 'businessaccountmanagement', component:BusinessAccountManagementComponent },
    ...
];

根据UrlSerializer文件我已经DefaultUrlSerializer像这样扩展:

import { DefaultUrlSerializer, UrlTree, UrlSerializer } from '@angular/router';

export class LowerCaseUrlSerializer extends DefaultUrlSerializer {
    parse(url: string): UrlTree {

        return super.parse(url.toLowerCase());
    }
}

export const LowerCaseUrlSerializerProvider = {
    provide: UrlSerializer,
    useClass: LowerCaseUrlSerializer
  };

所以在这个实现中一切都工作得很好因为所有url案例将转换为小写并匹配 path: 'businessaccountmanagement'

但是,我需要的是宣布我的路线是upper camel case这样的:

const routes: Routes = [
{ path: 'BusinessAccountManagement', component:BusinessAccountManagementComponent },
    ...
];

并接受所有匹配字符串的路由,无论字母大小写

接受的路线示例:

• 域/ BusinessAccountManagement
• 域/ businessaccountmanagement …

我们在Kubernetes集群上托管了基于Angular的Web应用程序.此应用程序的Ingress配置为添加基本URL:

{
  "kind": "Ingress",
  "apiVersion": "extensions/v1beta1",
  "metadata": {
    "name": "test-app",
    "namespace": "acceptance-testing",
    ...
    "annotations": {    
      "kubernetes.io/ingress.class": "nginx",
      "nginx.ingress.kubernetes.io/add-base-url": "true",
      "nginx.ingress.kubernetes.io/rewrite-target": "/",
      "nginx.ingress.kubernetes.io/ssl-redirect": "true"
    }
  },
  "spec": {
    "rules": [
      {
        "http": {
          "paths": [
            {
              "path": "/at/test-app",
              "backend": {
                "serviceName": "test-app",
                "servicePort": 80
              }
            }
          ]
        }
      }
    ]
  },
  ...
}

当我们在浏览器中输入包含客户端路由部分的URL时,ingress会将整个URL添加为在我们的场景中不正确的基础.

例如,对于https:// server/at/test-app/some-page请求基本URL应为https:// server/at/test-app /但我们接收https:// server/at/test-app /一些页/

我们已经切换到Angular哈希路由位置策略,现在它正常工作但我们想知道是否有某种方法使位置路由策略与nginx入口一起工作？

预先感谢您的帮助.

最好的祝福