标签: angular2-routing

我正在使用Angular 2(TypeScript)

我有两个组件(实际上它们也是两个页面).他们不是父母和孩子的关系.

当我单击第一个组件(页面)中的链接时,我想将值传递给第二个组件(页面).

我通过路由器知道"URL参数"的方式.但我不想在链接中显示此参数.还有其他方法吗？

谢谢!

我有一个简单的TopbarComponent,它基本上在我的视图顶部添加了一个bootstrapish导航栏.

由于90%的模板都应该包含此指令,我想通过我的处理它app.component看起来像这样:

import ...;

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html',
    directives: [ROUTER_DIRECTIVES, TopbarComponent, ...],
    providers: [ROUTER_PROVIDERS, ...]
})

@RouteConfig([
{
    path: '/login',
    name: 'Login',
    component: LoginComponent
},
{
    path: '/dashboard',
    name: 'Dashboard',
    component: DashboardComponent,
    useAsDefault: true
}
])

其模板看起来像这样:

<my-topbar></my-topbar>

<div class="container-fluid">
    <div class="row">
        <router-outlet></router-outlet>
    </div>
</div>

现在我想使用ngIf(或除了用css隐藏它之外的任何其他方式)来隐藏几条路线上的顶杆,/login例如.我尝试了几种方法在我的使用@CanAcitvate()或实现(以及从我的尝试),但没有任何影响(甚至有问题甚至让功能开火).我得到的最接近的是直接使用我喜欢的:OnActivateLoginComponentAppComponentRouterAppComponent

export class AppComponent implements OnInit{
    showTopbar:boolean;

    constructor(private _router:Router) {}

    ngOnInit():any {
        this.showTopbar = this._router.lastNavigationAttempt != '/login';
    }
} …

我的路由定义为/ abc /:id/xyz

其中abc /:id解析为ComponentA,而/ xyz是路由器插座中显示的子组件(ComponentB)

当导航到/ abc /:id/xyz时,当我在ComponentA中执行this.route.params.subscribe(...)(其中route是ActivatedRoute)时,我看到:id.在ComponentB中做同样的事情我没有看到:id.我猜ActivatedRoute正在使用url段.

无论如何要获得路线中的所有参数？

现在,我的网站的网址看起来像这样,因为我正在使用此处描述的方法

HTTP://本地主机:4200 /#/ cadastro

是否可以删除网址中的哈希值而不会出现404错误？

编辑:路由器模块添加

const appRoutes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'cadastro', component: CadastroNoivosComponent },
    { path: '**', component: HomeComponent }
];

export const routing = RouterModule.forRoot(appRoutes);

我正在尝试使用此技术拦截输入属性更改与setter将一些数据从父组件传递到子组件,并在更改值时调用子组件中的方法.我的问题是<router-link>,当我尝试使用以下方法传递数据时,子组件被绑定到父组件:

parent_component.html:

<router-outlet [some_value] = "some_value"></router-outlet>

其中some_value是我试图从父传递到子传递的参数.

parent_component.ts:

public some_value: string;

和

parent_component.ts:

@Input()
  public set some_vale(number : string){
    this._some_value = number;
  }

但是我得到了错误

未处理的Promise拒绝:模板解析错误:无法绑定到'some_value',因为它不是'router-outlet'的已知属性.

我究竟做错了什么？使用a时,将数据从父组件传递到子组件的正确方法是<router-outlet>什么？

在此先感谢,任何帮助表示赞赏.

我最近开始学习angular4,目前正致力于角度路由.我遵循了角度路由文档,并开始实现子路由的一些简单功能.我坚持不懈.以下是我的代码.谁能告诉我我做错了什么？

仪表板模块导入到根模块中,该模块有自己的路由. app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { DashboardModule } from './dashboard/dashboard.module';

@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent,
  ],
  imports: [
    BrowserModule,
    DashboardModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

根级路由模块,具有重定向到仪表板组件的默认路由. app/app-routing.module.ts

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

如何重用我的Angular构建,这样我就不必为每个特定环境构建？

我们需要找到一种在Angular中运行时操作环境的方法!

我们为每个环境设置了设置,我们使用NG build --env = dev并为开发环境构建.如何更改QA,UAT和生产环境中的配置？

工具集:.Net Visual Studio Team Services,Angular 2

在运行时没有办法做到这一点吗？我们是否坚持构建时间/设计时间？

我们还可以考虑根据我们的网址选择具有后缀的环境吗？ https:// company-fancyspawebsite- qa .azurewebsites.net

PS:我们正在为每个环境使用Angular 2环境文件夹和应用程序设置文件.

在Angular 4中有一些基本的路由概念,我不明白.

index.html:

<base href="/">

文件结构:

- app
|- app.routings.ts
|- collections
|-- collection.component.ts
|-- collection.component.html
|-- collectioninfo.component.ts
|-- collectioninfo.component.html
|- shared
|-- header.component.html
|-- header.component.ts

我的header.component.html中有一个链接:

<a class="nav-link" [routerLink]="['/collections']">
    Collections
</a>

如果我点击它我登陆localhost:4200 /集合.单击按钮时,将以编程方式更改URL(在collection.component.ts中):

this.router.navigate(['/collections/', collection.name]);

我最终在localhost:4200/collections/name - 一切都很好.现在我以编程方式想要回到/ collections(在collectioninfo.component.ts中):

this.router.navigate(['/collections']);

但这不起作用.该网址没有更改,我收到一条错误消息,指出无法加载参数 - 显然/ collections/name正在再次加载.认为它可能是一个路径问题,但这样的事情也行不通:

this.router.navigate(['../collections']);

附加信息:当我在打开/集合时手动重新加载页面时,我将再次转发到主页,但我认为这是另一个问题,与此行为无关.

app.routing.ts:

const APP_ROUTES: Routes = [
  ...
  { path: 'collections', component: CollectionComponent },
  { path: 'collections/:id', component: CollectionInfo },
];

我想打印我的应用程序的可视化站点地图,并希望使用路由器.我知道当前的路由可以通过router.config来访问

this.router.config.forEach(route => {

但我无法找到一个解决方案来加载他们的懒孩子.当我使用Augury浏览器插件时,我可以立即看到整个地图.有什么建议？

app.routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './public/home/home.component';

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: '../app/customers/customers.module#CustomersModule'
  },
  {
    path: 'admin',
    loadChildren: '../app/admin/admin.module#AdminModule'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: '**',    
    redirectTo: 'home',    
  }
];

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

这些在开发环境下工作正常.如果我直接打开,localhost:4200/home那么它就会降落在预期的页面上.

但是,使用with 构建和部署的那个ng build --prod --base-href=/myngapp/仅在www.domain.com/myngapp我www.domain.com/myngapp/home直接打开时才起作用,然后它会给出404未找到的错误.