标签: angular2-routing

我对 Angular2 还很陌生，我正在尝试编辑元素并将元素添加到我的数据库中。为了编辑它们，我进行了配置，elements/:id以便转到数据库并将元素拉回。你可以更新它，一切都很好。但是，当我尝试添加时，理论上我可以有完全相同的形式，但我不会有，id因为这是由后端分配的，所以我真的不知道我是否超载了element.detail.component，我应该创建一个新的只是为添加。

我还想过添加一条新路线，elements/addnew并使其优先于上述路线，或者只是拥有一条全新的路线。

更新：

到目前为止我的路由：

{ path: 'elements', component: ElementsComponent },
{ path: 'elements/:id', component: ElementDetailComponent },

如果我使用查询字符串的选项，我如何区分新元素并根据上面的路线拉取所有元素？

目前我有一个 Angular 2 组件，它被降级为指令并用于引导式混合 Angular1/Angular2 应用程序。在浏览器中加载组件时遇到问题，出现以下错误：

没有 ActivatedRoute 的提供者！

注意：以下，ActivatedRoute 的无提供者 - Angular 2 RC5不涵盖此用例。

这个应用程序仍然使用来自引导的 Angular 1 应用程序的所有路由，并且到目前为止工作得很好；此时我还没有将路由转换为使用 Angular 2 路由。我在构建的新组件中的要求之一是检查查询参数。这可以通过以下代码完成：

import { ActivatedRoute } from '@angular/router';

constructor(
        private route: ActivatedRoute)

route.queryParams.subscribe(
    data => this.Id = data['Id']);

我认为的问题在于，上面的代码依赖于 Angular2 路由器，正如我所提到的，它还没有在我的混合引导应用程序中使用。所以这是我的问题：

• 我可以在不使用 Angular2 路由器的情况下使用上面的代码并仍然检查查询字符串参数吗？用于$routeParams获取查询字符串信息的原始 Angular1 控制器。这在我的新 Angular2 组件中不受支持。如果上面的答案是我无法使用，ActivatedRoute因为我没有使用 Angular2 路由器，我应该尝试使用这种旧方法还是使用另一种方法；我需要做的就是检查组件中的路由参数？

我在我的 angular 应用程序中使用ng2-metadata，而 google 似乎只显示默认标题和元描述。

我的技术：用于托管的 Angular 版本 4、webpack、typescript 和 firebase。

我正在部署 AOT 构建，并且我添加了 ng2-metadata aot 函数，如下面的链接所示。

这是我正在使用的包： https : //www.npmjs.com/package/ng2-metadata

当前的问题：

该代码似乎可以在浏览器中直观地工作，但谷歌机器人似乎没有在谷歌搜索结果中显示其他页面的标题和元标记。

*我已经完成了一个网站管理员工具抓取请求来索引页面，即使它是一个 SPA。

这是我的博客页面的路线之一（我已经删除了一些文字）：

import { Route} from '@angular/router';
import { BlogComponent } from './blog.component';

export const BlogRoutes: Route[] = [
 {
    path: 'blog',
    component: BlogComponent,
    data : {
      metadata : {
        title : 'My Website | Blog',
        override : true,
        description : "The latest news & blog post....",
        keywords: "blog, reading, posts"
      }
    } …

当我提交表单时，我想导航到另一个站点并将 URL 中的搜索值设置为参数。

我有以下代码：

searchOffers() {
    this.router.navigate([
      '/search?query= +
        this.search.value.FG
    ]);
  }

此代码有效，但路由后的 URL 如下所示。

localhost:4200/search%3Fquery%3D1 

（query参数值为1）。

使用此 URL，我无法获取参数。

如何将 URL 格式化为：localhost:4200/search?query=1？

我有一个带有路由器链接的 div 标签。当点击 div 标签时，它应该导航到另一个页面。我也在路由器激活之前使用路由器解析来获取数据。

{ path: 'conversation/:id', component: InboxDetailComponent, resolve: { conversation: InboxConversationResolver }}

这就是 div 标签的出现方式。

<div class="list-group-item" *ngFor="let conversation of conversations; let j = index;" [routerLink]="['/app/inbox/detail',conversation.items[0].id]"></div>

除了一件事，一切都很好。当点击 div 标签时，页面滚动到顶部，然后导航到另一个页面。如何解决这个问题？

我想要一种更好的方式来编写这些代码行。

<li *ngIf="params.page > 1" class="page-item">
    <a class="page-link" [routerLink]="[]" [queryParams]="changePage(params,1)">First</a>
 </li>
<li *ngIf="!(params.page > 1)" class="page-item disabled">
     <a class="page-link">First</a>
</li>

我想在 !(params.page > 1) 时禁用 routerLink。“禁用”类是一种简单的方法（ngClass）。但 routerLink 仍将处于活动状态

我必须按照这些步骤来验证我的应用程序，但是我在创建链接到我的文件的路径时遇到了问题。

http://imgur.com/a/X2ZXU

上面的链接是我得到的说明，我创建了文本文件，并将它放在我的 angular 2 应用程序的资产文件夹中。但是我不知道如何创建路由http://www.example.com/riot.txt以便它引用我的 txt 文档文件。任何人都可以指出我正确的方向吗？我正在使用 Angular 2。

我想根据角色限制路线。我想在我的 canActivate 方法中检查导航路线是否有权访问页面。但是，this.router.url这给了我以前的路线而不是当前的导航路线。

这些是我的路线：

import { Routes } from '@angular/router';
import {WelcomeComponent} from "./welcome/welcome.component";
import { LoginComponent } from './login/login.component';

export const routes: Routes = [
  {path: '', component: WelcomeComponent},
  {path: 'login', component: LoginComponent},
  {path: '**', component: WelcomeComponent}
];

我使用ng buid.

当我输入未定义的路径时，我希望应用程序'/'在开发过程中重定向到路径，但我收到 404 错误。

即使我手动输入 /login URL 也会出现同样的错误。

我错过了什么？

我已经实现了我的自定义错误处理程序，并且我想重定向到我的自定义错误页面，该页面只是说“对不起，发生了错误......”。

我在 app-routing.module.ts 文件下声明了一个路由，如下所示：

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

import { NoContentComponent } from './no-content/no-content.component'
import { CustomErrorComponent } from './customerror/customerror.component';

const routes: Routes = [
    { path: '',   redirectTo: '/home', pathMatch: 'full' },
    { path: 'resources',  loadChildren: 'app/educational-materials/educational-materials.module#EducationalMaterialsModule' },
    { path: 'administrative',  loadChildren: 'app/dsc/dsc.module#DSCModule' },
    { path: 'ask-a-question',  loadChildren: 'app/aaq/aaq.module#AAQModule' },
    { path: '**', pathMatch: 'full', component: NoContentComponent },
    { path: 'error', component: CustomErrorComponent }
];

@NgModule({
    imports: [RouterModule.forRoot(routes, { …