标签: angular2-routing

我有以下代码片段用于生成nav-taps带有嵌入式下拉列表的引导程序:

    <ul class="nav nav-tabs">
      <li class="pull-right">
        <a class="dropdown-toggle" data-toggle="dropdown"> More <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a [routerLink]="['/profile/settings']">Settings</a></li>
            <li><a [routerLink]="['/profile/billing']">Billing</a></li>
          </ul>
      </li>
      <li class="pull-right" [routerLinkActive]="['active']"><a [routerLink]="['/profile/feature1']">Feature1</a></li>
      <li class="pull-right" [routerLinkActive]="['active']"><a [routerLink]="['/profile/feature2']">Feature2</a></li>
    </ul>

这适用于普通选项卡,但我无法弄清楚当任一嵌入式链接处于活动状态时如何使下拉列表处于活动状态.我试过了:

<a [routerLinkActive]="['active']" class="dropdown-toggle" data-toggle="dropdown"> More <span class="caret"></span></a>

但它似乎没有解决任何问题,任何人都知道如何做到这一点？

假设我有以下appRoutingModule:

export const routes: Route[] = [
  {
    path: '',
    component: ApplicationlistComponent
  }
];

@NgModule( {
  imports: [ ApplicationsModule, RouterModule.forRoot( routes ) ],
  exports: [ RouterModule ],
  declarations: [ApplicationlistComponent]
} )
export class AppRoutingModule {
}

使用ngc cli命令编译时,会出现以下错误:

Error: Error encountered resolving symbol values statically. Calling function 'RouterModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppRoutingModule in C:/git/mxt-frontend/landing-page-client/src/client/app/app-routing.module.ts, resolving symbol AppRoutingModule in C:/git/mxt-frontend/landing-page-client/src/client/app/app-routing.module.ts

我尝试将它放在导出的const中:

export const …

我正在将我的应用程序迁移到最新的RC并且遇到一些我无法解决的错误.在决定问这里之前,我做了一个彻底的搜索,但没有任何运气.

因此,按下按钮时,应加载以下内容:

这是组件:

import { Component,OnInit } from '@angular/core';

import { HTTPService } from '../shared/api.service';
import { Server } from './server.model';
import { SharedService } from '../shared/moveData.service';


@Component({
    templateUrl: './mainserverpage.template.html',
})
export class MainServerPage implements OnInit {

    constructor(private _httpService: HTTPService, 
                private _moveData: SharedService) { }

    errorMessage: string;
    public servers: Server[];
    isLoading = true;
    tillLoading;
    selectedServer: Server;
    currentServer;
    isServerOnline=false;

    ngOnInit() {
          this.getServers('qa');
    }

    reloadServers(env) {
        this.servers = null;

        this.getServers(env);
    }

    getServers(env?) {
        this._httpService.getServers(env)
            .subscribe(
            value => {
                this.servers = …

我正在通过APP_INITIALIZER以下方式从服务器预加载应用程序配置AppModule：

providers: [
    ConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: configServiceFactory,
      deps: [ConfigService],
      multi: true
    }
  ],

然后，ApiService从手动注入ConfigService：

@Injectable()
export class ConfigService {

  private api: ApiService;

  public constructor(
    private injector: Injector
  ) {

    // Avoid cyclid dependencies, inject manually:
    this.api = injector.get(ApiService);
  }

最后router在注入时是不确定的ApiService

import { Http, Headers, RequestOptionsArgs, Response } from '@angular/http';
import { Router } from '@angular/router';

@Injectable()
export class ApiService {

  constructor(
    private router: Router,
    private http: Http …

我在用路由器插座填充所有可用空间时遇到问题。

我在应用程序中使用了角度/弯曲布局。路由器所装载的组件并不会占据所有可用空间。

<div fxLayout="column" fxFlexFill>
  <maat-top-bar></maat-top-bar>
  <router-outlet fxFlex></router-outlet>
</div>

应用和dom的屏幕截图

路由器插座占用空间而不是子组件。在屏幕截图中，组件为<maat-home></maat-home>。在DOM树中，此组件位于路由器出口之后。

我该怎么办，组件<maat-home></maat-home>将占用剩余空间？

谢谢！

我需要根据route参数的类型加载不同的组件。如果route参数是字符串，则加载如下所示的一个组件，

{ path: 'care/action/:string',component: StringComponent},

如果路由参数是数字，则加载另一个组件，如下所示

{ path: 'care/action/:number', component: NumberComponent},

请注意，URL将保持不变，仅参数类型会更改。

如何实现呢？

提前致谢。

我尝试在HTTP.POST/GET请求中传递标头时出现以下错误 Argument of type '{header:Header;}' is not assignable to parameter of type 'RequestOptionsArgs'. Property 'null' is missing in the type '{header:Header;}'

我尝试了很多解决方案,但没有锁定它.

我的代码:

import { Injectable } from '@angular/core';
import { Response, RequestOptions, Headers, Http, URLSearchParams} from '@angular/http';
import { Observable, Subject } from 'rxjs/Rx';  
import {Company} from './companyMaster';
import 'rxjs/add/operator/map';
import "rxjs/Rx";
import 'rxjs/add/operator/toPromise';
import {CommonService} from '../../common.service';
@Injectable()
export class CompanyMasterService {
private GetListActionUrl: string;
private AddEditActionUrl: string;
public headers = new Headers({ 'Content-Type': 'application/json' });
public options …

在home.component.html页面中，我希望按钮在单击时将URL重定向到新页面。

我希望当我单击按钮时，当前url http://localhost:24282/home将被重定向到该URL http://localhost:24282/master并master.component.html显示页面。

问题是，尽管http://localhost:24282/master当我单击按钮时将URL重定向到，但是我仍然在当前页面上home.component.html。我没有完全重定向到母版页master.component.html

下面是实现。

应用程序路由

    import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './Components/home.component';
import { MasterComponent } from './Components/master/master.component';
import { PageNotFoundComponent } from "./Components/common/page-not-found.component";

const appRoutes: Routes = [
    { path: 'home', component: HomeComponent },
    { path: 'master', component: MasterComponent },
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent } …

我在应用程序中创建了一个新模块，因此我可以将不需要通信的部分分开，并使用其自己的路由模块和组件创建了一个new.module.ts：

new-routing.module.ts：

const exportRoutes: Routes = [
  {
    path: 'export',
    component: ExportsComponent
  }
]

@NgModule({
  imports: [RouterModule.forRoot(exportRoutes)],
  exports: [RouterModule]
})
export class ExportRoutingModule {}

new.module.ts：

import { Router } from '@angular/router'
import { BrowserModule } from '@angular/platform-browser'

// Routing Module
import { NewRoutingModule } from './new-routing.module'

@NgModule({
  imports: [..., ExportRoutingModule, ...],
  declarations: [ExportsComponent],
  bootstrap: [ExportsComponent]
})

我有一个简单的index.html：

<body class="app">
  <router-outlet></router-outlet> // outlet is here because I read that I needed it to be able to use …

我正在使用Angular 4+在当前项目中处理仪表板布局。

当用户在应用程序的不同部分之间导航时，我需要navmenu标头标题进行更新以反映应用程序的当前部分。

例如，当用户访问设置时，“页面标题”应更改为“设置”

该项目基于.net core 2 Angular模板。下面是我必须组成应用程序路由以及仪表板路由的代码。

导航服务

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class NavigationService {
    private titleSource = new BehaviorSubject<string>("Page Title");
    currentTitle = this.titleSource.asObservable();

    constructor() {
    }

    changeTitle(title: string) {
        this.titleSource.next(title);
    }
}

应用程序路由模块

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from "./components/home/home.component";

const appRoutes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', …