小编dhi*_*ilt的帖子

我有一个关于Angular 2路由器的小问题,3.0.0-rc.1我希望根据用户角色(例如AdminComponent或UserComponent)导航到不同的主组件.任何人都可以帮助修改以下路线,以便我可以实现所需的功能吗？

{path: 'login', component: LoginComponent},  // <--- This redirects to '/' in case user is logged in
{
  path: '',
  component: HomeComponent,               
  canActivate: [AuthGuardService],  // <--- Check if user is logged in, else redirect to login
  children: [
    {
      path: '',
      component: AdminComponent  // <--- Want to navigate here if user role is 'admin'
    },
    {
      path: '',
      component: UserComponent  // <--- Want to navigate here if user role is 'user'
    }
  ]
}

AuthGuardService.ts

import {Injectable} …

我i18next通过传递语言代码（en-UK）来调用更改语言函数，如下所示：

var changeLng = function (varLng) {  
  i18next.changeLanguage('en', (err, t) => {
    if (err) return console.log('something went wrong loading', err);
    t('applog'); // -> same as i18next.t
  });
};

我遇到以下问题：

VM4081 i18next.js:1912 Uncaught TypeError: Cannot read property 'toResolveHierarchy' of undefined
    at setLng (VM4081 i18next.js:1912)
    at I18n.changeLanguage (VM4081 i18next.js:1927)
    at changeLng (VM4079 langUK.js:23)
    at HTMLImageElement.<anonymous> (VM4079 langUK.js:8)

i18next我认为尝试执行该操作时出现了问题：

_this4.languages = _this4.services.languageUtils.toResolveHierarchy(l);

但我看不出正确执行此操作需要什么。预先感谢您的支持，杰克

我有最简单的Angular结构指令:

import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({ selector: '[hello]' })
export class HelloDirective {
  constructor(
    private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {
      this.viewContainer.createEmbeddedView(this.templateRef);
  }
}

我用这种方式:

<div *hello>Hello Directive</div>

它按预期显示"Hello Directive"消息.现在我想通过用另一个组件包装来更改内容:

<my-component>Hello Directive</my-component>

我希望该指令能够为我做到这一点.我知道我可以使用组件范例,HelloComponent而不是HelloDirective使用装饰器上的或ng-template由属性定义的模板来创建...但是有没有一种方法可以与指令范例一起使用来实现这样的结果？templatetemplateUrl@Component

我正在尝试使用mat-tab.我在html中添加了以下代码

<mat-tab-group>
    <mat-tab label="Tab 1"> <app-latest-article></app-latest-article></mat-tab>
    <mat-tab label="Tab 2">  <app-trending-article></app-trending-article> </mat-tab>
</mat-tab-group>

在ts文件中

import {MatTabsModule} from '@angular/material/tabs';

我收到了错误

<mat-tab-group>
    <mat-tab label="Tab 1"> <app-latest-article></app-latest-article></mat-tab>
    <mat-tab label="Tab 2">  <app-trending-article></app-trending-article> </mat-tab>
</mat-tab-group>

我正在使用router.event.subscribe @angular/routerurl更改执行if语句虽然event.subscribe工作正常.但我的问题是如何避免重复我的if陈述只是为了在这些网址上显示标题.这可能是其他东西,router.subscribe但不知道该用什么.

基本上想要一个基于你所在网址的动态标题.

this._router.events.subscribe((event) => {
            console.log('route changed');
            if(this.location.path() == '/1'){
                this.title = 'Title 1';
            } else if(this.location.path() == '/2'){
                this.title = 'Title 2';
            }
        }); 

我不知道这是否有意义.我可以改变我的route.ts路径有类似的东西{ path: 'Title-1' },只是删除了-做,.replace()但这样做会给我www.mysite.com/Title-1但它看起来不是很友好.

我对Angular 2和Observables的概念很新.然而,对于经验丰富的大师来说,我想要实现的目标应该相当简单:)

所以:我有一个组件,其中我有subscribed来自服务的observable.出于测试目的,我一直在使用数据阵列来使我的组件生效.现在,当它完成时,我想要将真正的API调用挂钩到我的服务.现在问题是我从服务器获得的数据需要在返回到组件之前进行操作.当我操纵它时,我得到错误,例如"无法读取属性'订阅'为null"

现在基本上会出现这个错误,因为在我的服务可观察中,我使用HTTP.get方法发送API请求,代码不等待其响应完成.我从服务器获得结果,但是在控制台中出现错误之后.

任何人都可以指导我如何请求HTTP调用,然后在将数据发送到已订阅服务的组件之前操纵它的数据？

这是我的组件代码:

getSearchResults(keyword, parentId?, subCatId?) {
    this.subscriptionResults = this.catalogService.getSearchResults(keyword, parentId, subCatId)
        .subscribe(
            data => {
                this.results                = data.results.parts;
                this.numResults             = data.results.totalItemCount;
                this.timeResults            = data.results.processingTimeMS;
                this.categories             = data.categories;
                this.subCategories          = data.subCategories;
                this.brands                 = data.brands;
                this.suppliers              = data.suppliers;
                this.layoutType             = data.layoutType;
                this.allCategories          = data.allCategories;
                this.selCategoryName        = data.selCategoryName;
                this.selSubCategoryName     = data.selSubCategoryName;

                if ( this.debugMode ) {
                    console.log('RESULTS: ', data);
                }
            },
            error => this.errorMessage = <any>error
        );
}

这是我的服务:

// Get data from server
getDataFromServer(URL: string): Observable<any> …

我正在尝试实现具有行重新排序功能的 Kendo-Grid，如此处所宣传的。

当网格处理通过 Ajax 调用获取的数据时，行的重新排序（即拖放行）在视图更改之前不起作用（例如：直到用户单击本示例中分页中的第二页） ）

下面是我的 app.component.ts 文件

import { State, process } from '@progress/kendo-data-query';
import { Component, Renderer2, NgZone, AfterViewInit, OnInit, EventEmitter, OnDestroy } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import { Subscription } from 'rxjs/Subscription';
import { HttpClient, HttpParams} from '@angular/common/http';

@Component({
    selector: 'my-app',
    template: `
        <kendo-grid
            [data]="gridData"
            [height]="410"
            [pageable]="true"
            [skip]="state.skip"
            [pageSize]="state.take"
            (dataStateChange)="dataStateChange($event)">
            <kendo-grid-column field="id" title="ID" width="60">
            </kendo-grid-column>
            <kendo-grid-column field="title" title="To Do">
            </kendo-grid-column>
            <kendo-grid-column field="completed" title="Completed" width="60">
                <ng-template kendoGridCellTemplate let-dataItem>
                    <input …

我正在为 angular 构建一个组件库，我们将在项目之间共享它。但是当我构建包时，html 文件不会被复制到 dist 文件夹中。我收到错误angular Failed to load text-input.component.html。

这是我的 tsconfig.json：

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  },
  "exclude": [
    "node_modules",
    "dist",
    "**/*.spec.ts"
  ]
}

这是编译后的组件：

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) …

实际上，我已经在WordPress商店定位器中更改了一些代码。我希望它在插件更新时保留。所以我想为此创建一个子插件。关于如何管理它的任何想法？

当应用程序在浏览器中加载时，它会发出以下警告。所以无法为 prod ( ng build --aot --prod)创建构建

    It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');

ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>'; …