小编Vas*_*its的帖子

我想知道是否有可能像标题所说的那样做.

例如,假设我们正在开发一个Angular2项目,我们希望避免将模板设置为外部URL,以减少http请求.我们仍然不想在组件中编写所有HTML,因为它可能足够大,或者我们希望设计人员使用不同于开发人员的文件.

所以这是第一个解决方案:

File template.html.ts 将文件转换为.ts,如下所示:

export const htmlTemplate = `
   <h1>My Html</h1>
`;

然后在我的组件中我可以像这样导入它:

import { Component } from 'angular2/core';
import {RouteParams, RouterLink} from 'angular2/router';
import {htmlTemplate} from './template.html';

@Component({
  selector: 'home',
  directives: [RouterLink],
  template:  htmlTemplate,
})

实际上这很好用,但是你丢失了IDE HTML智能,所以这对于创建HTML模板的设计人员/ dev来说是不好的.

我想要实现的是找到一种方法来导入.html文件,而不是.ts.

那么可以在.TypeScript中将.html文件作为字符串导入吗？

正如您最近可能已经提到的那样,如果您还使用参数,则@angular/router 3.0.0-rc.1不允许使用user 参数.redirectTochildren

但在某些情况下,这肯定是我需要的东西.例如,我想要的是将所有对父路由器的请求重定向到第一个子节点.

这是我的路由器:

{
    path: 'project/:id',
    component: ProjectComponent,
    children: [
      {
        path: 'properties',
        component: ProjectPropertiesComponent
      },
      {
        path: 'stats',
        component: ProjectStatsComponent
      }
    ]
  }

在我的情况下,我希望每个进入project/:id路线的人都被重定向到第一个孩子(properties).

这有可能吗？

如果我这样做:

{
    path: 'project/:id',
    component: ProjectComponent,
    redirectTo: 'properties',
    children: [
      {
        path: 'properties',
        component: ProjectPropertiesComponent,
      },
      {
        path: 'stats',
        component: ProjectStatsComponent
      }
    ]
  }

我当然得到这个错误:

EXCEPTION:错误:路由'project /:id'的配置无效:redirectTo和children不能一起使用

在这种情况下,我使用Angular 2的RC5和最新的路由器遇到了这个问题.

我的routes.ts文件是这样的:

import {
  provideRouter,
  Routes,
  RouterModule
}
from '@angular/router';
import {
  OverviewComponent,
  LoginComponent,
  ProfileComponent
} from './shared';
import { AuthGuard } from './auth.guard';
import { HasToken } from './common/index';

const routes: Routes = [
  {
    path: '',
    component: OverviewComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'profile',
    component: ProfileComponent,
    canActivate: [AuthGuard]
  },
  {
    path: '**',
    redirectTo: '/login'
  }
];

export const authProviders = [AuthGuard, HasToken];

export const appRouterProviders = [
  provideRouter(routes),
  authProviders
];

export …

在最新版本的@angular/router 3.0.0-rc.1The way中,您可以更改URL /路由中的参数.

根据这个文档,您应该能够通过订阅参数获得参数,但在我的情况下,它似乎不起作用.

我想要实现的是将params放入我的父组件FROM子路由.

例如,假设这是我的路线:

const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    pathMatch: 'prefix',
    children: [
      {
        path: ':id',
        component: ChildComponent
      }
    ]
  }
];

我想获取id参数并在我的ParentComponent中使用它.所以我这样做:

export class ParentComponent implements OnInit {

  sub: any;
  constructor(
    private route: ActivatedRoute) {
    this.route = route;
   }

  ngOnInit() {

    this.sub = this.route.params.subscribe(params => {
     let id = params['id'];
     console.log(id);
   });

  }

}

像这样我得到:

未定义

我在这里错过了什么？

由于Angular团队不断升级/弃用Angular 2 RC版本的东西,我遇到了这个问题.

我有一个具有依赖注入(DI)的组件,它实际上是一个服务(在这种情况下是UserService).这个UserService当然有一些自己的DI.在更新到Angular 2的最新RC4后,我意识到我不能再创建类似的测试了.

因此,文档中没有提到相关内容,这是我的代码(针对此问题进行了简化).

我的组件:

import { Component } from '@angular/core';
import { MdButton } from '@angular2-material/button';
import {
  MdIcon,
  MdIconRegistry
} from '@angular2-material/icon';
import { UserService } from '../../services/index';

@Component({
  moduleId: module.id,
  selector: 'logout-button',
  templateUrl: 'logout-button.component.html',
  styleUrls: ['logout-button.component.css'],
  providers: [MdIconRegistry, UserService],
  directives: [MdButton, MdIcon]
})
export class LogoutButtonComponent {

  constructor(public userService: UserService) {}

  /**
   * Call UserService and logout() method
   */
  logout() {
    this.userService.logout();
  }

}

组件的DI,UserService whic,你可以看到有一些DI(路由器,AuthHttp和Http):

import { Injectable } from '@angular/core';
import {
  Http, …

我想测试一个具有一些依赖关系的简单组件.所以除其他外,我必须提供一些提供商.

/* tslint:disable:no-unused-variable */

import { By }           from '@angular/platform-browser';
import { DebugElement, provide } from '@angular/core';

import {
  beforeEach,
  beforeEachProviders,
  describe,
  expect,
  it,
  inject,
  fakeAsync,
  TestComponentBuilder
} from '@angular/core/testing';

import { AuthHttp, AuthConfig } from 'angular2-jwt';
import { Router, provideRouter } from '@angular/router';
import { Http, ConnectionBackend, RequestOptions, HTTP_PROVIDERS } from '@angular/http';
import { LogoutButtonComponent } from './logout-button.component';
import { UserService } from '../../services/index';

describe('Component: LogoutButtonComponent', () => {

  let component: LogoutButtonComponent;

  beforeEachProviders(() => [
    LogoutButtonComponent,
    Http,
    provide(AuthHttp, { …

我想给我的组件的host元素一个类,所以直到现在我使用这样的host属性:

@Component({
  selector: 'left-bar',
  host: { 'class': 'left-bar' },
  templateUrl: 'app/left-bar/left-bar.component.html',
  styleUrls: ['app/left-bar/left-bar.component.css']
})
export class LeftBarComponent implements OnInit {

  ngOnInit() {
  }

}

现在虽然我收到了TypeScript的警告,但这是一个不好的做法.

[tslint] In the "@Component" class decorator of the class "LeftBarComponent" you are using the "host" property, this is considered bad practice. Use "@HostBindings", "@HostListeners" property decorator instead.

如何以更正确的方式向主元素添加类并摆脱此警告？

谢谢!

更新:基于以下答案:我得到了类,但是在添加类之后样式不会影响父主机元素.我的风格很简单:

.left-bar {
  position: fixed;
  width: 120px;
  left: 0;
  top: 0;
  bottom: 0;
  background: #323232; }

基于Angular 2 的文档,您可以使用@Input轻松地将数据从组件传递到另一个组件.

例如,我可以像这样设置父级:

import { Component } from '@angular/core';
import { HEROES } from './hero';
@Component({
  selector: 'hero-parent',
  template: `
    <h2>{{master}} controls {{heroes.length}} heroes</h2>
    <hero-child *ngFor="let hero of heroes"
      [hero]="hero"
      [master]="master">
    </hero-child>
  `
})
export class HeroParentComponent {
  heroes = HEROES;
  master: string = 'Master';
}

并获取子组件中的数据,如下所示:

import { Component, Input } from '@angular/core';
import { Hero } from './hero';
@Component({
  selector: 'hero-child',
  template: `
    <h3>{{hero.name}} says:</h3>
    <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
  `
})
export …

我有一个带有TypeScript,Angular和几个依赖项的Web应用程序.

当然也在这里. package.json从乞讨中被引入到项目中,npm init现在它看起来像这样:

{
  "name": "myApp",
  "version": "0.0.8-d",
  "description": "Web App",
  "author": "Author",
  "license": "ISC",
  "repository": {
    "type": "git",
    "url": "MYURL"
  },
  "bugs": {
    "url": "MYURL"
  },
  "homepage": "MYURL",
  "browserify": {
    "transform": [
      "debowerify"
    ]
  },
  "dependencies": {
    "malihu-custom-scrollbar-plugin": "^3.1.3"
  },
  "devDependencies": {
    "browserify": "~13.0.0",
    "connect-history-api-fallback": "^1.2.0",
    "connect-modrewrite": "^0.8.2",
    "debowerify": "~1.2.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-clean-css": "^2.0.4",
    "gulp-concat": "^2.6.0",
    "gulp-connect": "^3.2.2",
    "gulp-less": "^3.0.5",
    "gulp-ng-annotate": "^2.0.0",
    "gulp-sass": "^2.2.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-typescript": "^2.12.2",
    "gulp-uglify": "^1.5.3",
    "jasmine": "^2.4.1",
    "run-sequence": …

Angular Material md-switch是一个很棒的指令.由于我在文档中或在网络中找不到相关的东西,我想知道是否有可能在伪状态时更改指令的背景.

正如您在上面的链接中所看到的,当md-switch处于真/活状态时,它可以具有颜色.您只需使用class或ng-class语句设置它即可.

我想虽然有两种颜色,但是当我的范围是真的时,我们会说md-primary,而当它的范围是真的时我会说md-warn.

例如:

<md-switch ng-model="status" aria-label="Status" ng-class="{'md-primary': status === true, 'md-warn': status === false}"></md-switch>

但这不起作用.

任何想法,如果不知何故可以做到这一点,而无需手动覆盖CSS？

ps:状态正在改变那里没有问题;)