相关疑难解决方法(0)

是否可以在Angular 2路线中有一个可选的路线参数？我在RouteConfig中尝试了Angular 1.x语法但收到了以下错误:

"ORIGINAL EXCEPTION:Path"/ user /:id？"包含"？",这在路由配置中是不允许的."

@RouteConfig([
{
    path: '/user/:id?',
    component: User,
    as: 'User'
}])

我正在研究这个angular2项目,我用它ROUTER_DIRECTIVES来从一个组件导航到另一个组件.

有2个组件.即PagesComponent&DesignerComponent.

我想从PagesComponent导航到DesignerComponent.

到目前为止它的路由正确但我需要传递pageObject,因此设计人员可以加载该页面对象本身.

我尝试使用RouteParams但它获取页面对象undefined.

下面是我的代码:

pages.component.ts

import {Component, OnInit ,Input} from 'angular2/core';
import { GlobalObjectsService} from './../../shared/services/global/global.objects.service';
import { ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router';
import { DesignerComponent } from './../../designer/designer.component';
import {RouteParams} from 'angular2/router';

@Component({
    selector: 'pages',    
    directives:[ROUTER_DIRECTIVES,],
    templateUrl: 'app/project-manager/pages/pages.component.html'
})
@RouteConfig([
  { path: '/',name: 'Designer',component: DesignerComponent }      
])

export class PagesComponent implements OnInit {
@Input() pages:any;
public selectedWorkspace:any;    
constructor(private globalObjectsService:GlobalObjectsService) {
    this.selectedWorkspace=this.globalObjectsService.selectedWorkspace;                    
}
ngOnInit() { }   
}

在html中,我正在做以下事情: …

我正在使用window.historyJavascriptMVC应用程序为每个控制器启用后退/前进/刷新功能.每次我加载一个新的控制器,我都 window.history.pushState用来为历史添加一个新的状态.然后在返回/刷新时我正在使用已保存的状态并重新使用数据来再次构建控制器.

除了特定场景中的一个问题外,整个想法都很好.我收到以下错误:

无法在"历史记录"上执行"pushState":无法克隆对象.

在其他方案中添加相同的数据没有问题.什么可能导致此错误？谢谢你的帮助.

我正在使用angular2开发一个应用程序.我有一个场景,我需要在路由时使用复杂数据(对象数组)从一个组件传递到另一个组件(它们不是父子,它们是两个独立的组件)(使用router.navigate()).我用Google搜索了这一点,大部分结果都描述了父子组件的场景.我已经完成了结果并找到了传递数据的方法.

1)创建共享服务2)作为路由参数传递

第二种方法对我有效(尽管如此,当我有如上所述的复杂数据时,我不喜欢这种方法).我无法使用共享服务共享数据.所以我的问题是,使用服务的组件之间传递数据只在组件处于父子关系时才有效吗？另外,请告诉我是否还有其他优先方法可以在一个组件和另一个组件之间传递数据？

更新:我在我的场景中添加了一些代码.请让我知道为什么通过共享服务传递数据不起作用的错误.

我有2个组件:1)SearchComponent 2)TransferComponent我在SearchComponent中设置数据,并希望通过utilityService访问TransferComponent中的数据.

公用事业服务

import {Injectable} from "@angular/core";

@Injectable()
export class UtilityService{
    constructor(){

    }
    public bioReagentObject = [];

    routeBioReagentObj(bioReagentObj){
        console.log("From UtilityService...", bioReagentObj);
        for (let each of bioReagentObj)
            this.bioReagentObject.push(each)
        // console.log("From UtilityService",this.bioReagentObject);
    }

    returnObject(){
        console.log("From UtilityService",this.bioReagentObject);
        return this.bioReagentObject
    }



}

searchcomponent.ts

    import {UtilityService} from "../services/utilityservice.component";
    import {Component, OnInit, OnDestroy, Input} from '@angular/core';

@Component({
    selector: 'bioshoppe-search-details',
    providers: [UtilityService],
    templateUrl: 'app/search/searchdetails.component.html',
    styleUrls: ['../../css/style.css']
})

export class SearchDetailsComponent implements OnInit, OnDestroy {
    constructor(private route: ActivatedRoute,
                private utilityService: UtilityService,
                private router: Router) …

我在使用角度4的路径时遇到了一些问题.您知道,当我尝试将数据从组件传递到另一个组件时navigate('root', data),我刚接收到[object Object],[object Object],[object Object].

零件

export class FillRequestComponent implements OnInit {

  constructor(private route: Router, private dataRoute: ActivatedRoute) { }

  ngOnInit() {
    const key: Products = this.dataRoute.snapshot.params['objectProducts'];
    console.log(key);
  }

接口

export interface Products {

  color: string,
  question: string,
  surname: string,
  icon: string,
  selected: boolean,
  transparent: boolean
}

发送方法

const data = {
      category: this.optionSelected,
      objectProducts: this.optionSelected === 'CREDIT' ? this.productCreditList :
        this.productAccountsList
    };

    this.route.navigate(['/requests/fill', data]);

我在Angular2中有一个组件,用于托管用户表(userTableComponnent)和另一个userDetails组件.单击users表中的一行后,我想要路由到userDetails.一种实现方式是仅传递userId,因此在userDetails中,我使用另一个http get获取用户的详细信息.但是,这是多余的,因为我抓取了userTableComponent中的所有用户信息.所以我真正需要的是将User对象从userTableComponent传递给userDetails.知道如何通过路由实现它吗？

我正在尝试构建一个Angular2原型(基于alpha44)我们的Angular1应用程序(相当复杂的一个),我正在尝试在使用路由和子路由时找到最佳的模型/数据架构.

在我的示例中,从路由创建的子组件,我想访问父组件的属性(托管router-outlet).

但是当你从创建一个组件router-outlet,你不能使用@Input和@Output了.那么注入一些数据/属性的最佳实践是什么,除了基本routeParams和静态routeData？

如何在没有太多耦合的情况下与父组件通信？

假设我在 Tab1，参数 id=1。具体的结果 url 是http://localhost:4200/project/tab1;id=1。现在我单击 Tab2 并且 url 更改为 http://localhost:4200/project/tab2。有没有办法路由 id 以便我得到http://localhost:4200/project/tab2;id=1？

https://stackblitz.com/edit/angular-qzwzju

<nav mat-tab-nav-bar [backgroundColor]="'primary'">
    <div mat-tab-link *ngFor="let link of navTabs" [routerLink]="link.link" routerLinkActive #rla="routerLinkActive"
      [active]="rla.isActive">
      {{link.label}}
    </div>
</nav>
<router-outlet></router-outlet>

navTabs: NavTab[];

activeLinkIndex: number = -1;

constructor(private router: Router, private route: ActivatedRoute) {
  this.navTabs = [
    { label: 'Tab1', link: './tab1', index: 0 },
    { label: 'Tab2', link: './tab2', index: 1 },
    { label: 'Tab3', link: './tab3', index: 2 },
  ];
}

ngOnInit(): void { …