标签: angular2-directives

我想创建一个指令,决定是否应该或不应该在页面上的主机元素apppear.理想情况下,我希望它从DOM中删除元素,而不是用css隐藏/显示它.用例是:

<ul role="navigation">
  <li><a>public link</a></li>
  <li><a>public link2</a></li>
  <li access="admin"><a>admin-only link</a></li>
</ul>

它将使用UserService来获取currentUser角色,如果没有管理员,那么li将被删除.

我想ng-if通过将表达式传递给主要组件中的evaulate,我可以实现相同的效果(如果它仍然在角度2中可用).但是使用该指令它更具语义和优雅.

可能吗？

import {Directive} from 'angular2/angular2';

@Directive({
    selector: 'access'
})
export class Access {
 //what goes here
}

我可以在角度1(内部指令的compile函数)中轻松完成,但我怎么能在Angular 2中做到这一点？

我想在构造函数中的组件上设置字符串属性,但是当我尝试这样的东西时

@Component({
    selector: 'wg-app',
    templateUrl: 'templates/html/wg-app.html'
})
export class AppComponent {

    constructor(private state:string = 'joining'){

    }
}

我得到DI例外

    EXCEPTION: No provider for String! (AppComponent -> String)

很明显,注入器正试图找到一个"字符串"提供者,但找不到任何.

我应该为这类事物使用什么样的模式？例如.将初始参数传递给组件.

应该避免吗？我应该注入初始字符串吗？

我有一个列表组件,代码如下:

///<reference path="../../node_modules/angular2/typings/browser.d.ts"/>
import { Component, OnInit } from 'angular2/core';
import { ROUTER_DIRECTIVES } from 'angular2/router';

import { Employee } from '../models/employee';
import { EmployeeListServiceComponent } from '../services/employee-list-service.component';

@Component({
  selector: 'employee-list',
  template: `
    <ul class="employees">
  <li *ngFor="#employee of employees">
    <a [routerLink]="['EmployeeDetail', {id: employee.id}]">
      <span class="badge">{{employee.id}}</span>
      {{employee.name}}
    </a>
  </li>
</ul>
  `,
  directives: [ROUTER_DIRECTIVES],
  providers: [EmployeeListServiceComponent]
})

export class EmployeeListComponent implements OnInit {
  public employees: Employee[];
  public errorMessage: string;

  constructor(
    private _listingService: EmployeeListServiceComponent
  ){}

  ngOnInit() {
    this._listingService.getEmployees().subscribe(
                     employees => this.employees = employees, …

我坚持如何ngModel使用指令访问和更改输入值.问题的结果是,当我选择所需的地址时,模型的地址值不会更新...它只是设置为我实际键入输入的内容,而不是输入的最终值.

我键入'830':

我选择'8300 Fauntleroy Way Southwest,Seattle,WA,United States':

结果价值:

{
  address: '830'
}

期望值:

{
  address: '8300 Fauntleroy Way Southwest, Seattle, WA, United States'
}

在AngularJS中,我可以这样做:

(function() {
  'use strict';

  angular
  .module('casemanagerApp')
  .directive('googleplace', googleplace);

  function googleplace() {

    var directive = {
      require: 'ngModel',
      link: link
    };

    return directive;

    function link(scope, element, attrs, model) {
      var options = {
        types: [],
        componentRestrictions: {}
      };
      scope.gPlace = new google.maps.places.Autocomplete(element[0], options); // jshint ignore:line

      google.maps.event.addListener(scope.gPlace, 'place_changed', function() { // jshint ignore:line
        scope.$apply(function() …

我最近构建了以下Angular 2 Read More组件.该组件所做的是使用"Read more"和"Read less"链接折叠和扩展长文本块.不是基于字符数,而是基于指定的最大高度.

import { Component, Input, ElementRef, AfterViewInit } from '@angular/core';

@Component({
    selector: 'read-more',
    template: `
        <div [innerHTML]="text" [class.collapsed]="isCollapsed" [style.height]="isCollapsed ? maxHeight+'px' : 'auto'">
        </div>
            <a *ngIf="isCollapsable" (click)="isCollapsed =! isCollapsed">Read {{isCollapsed? 'more':'less'}}</a>
    `,
    styles: [`
        div.collapsed {
            overflow: hidden;
        }
    `]
})
export class ReadMoreComponent implements AfterViewInit {

    //the text that need to be put in the container
    @Input() text: string;

    //maximum height of the container
    @Input() maxHeight: number = 100;

    //set these to false to …

在Angular 2 RC 4中,我有一个类HttpLoading,它扩展了Angular 2的原始Http服务.

使用RC 4,我可以使用以下代码在bootstrap中使用它而没有任何问题:

bootstrap(AppComponent, [
    HTTP_PROVIDERS,
    provide(RequestOptions, { useClass: DefaultRequestOptions }),
    provide(Http, {
        useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new HttpLoading(backend, defaultOptions),
        deps: [XHRBackend, RequestOptions]
    })
]).catch(err => console.error(err));

我的DefaultRequest选项类

import { Injectable } from '@angular/core';
import { Headers, BaseRequestOptions } from '@angular/http';

@Injectable()
export class DefaultRequestOptions extends BaseRequestOptions {
    headers: Headers = new Headers({
        'Content-Type': 'application/json'
    });
}

我的HttpLoading类看起来像这样:

import { Http, RequestOptionsArgs, ConnectionBackend, RequestOptions, Response } from '@angular/http'
import { Injectable } from '@angular/core' …

是否有可能检测到变量的变化？

我有以下内容:

@Input('name') name: string;

我想在这个变量'name'中发生变化时调用一个函数.

可能吗？

我有一个附加元素的Angular 1.x指令.简而言之:

app.directive('mydirective', function() {
  template: '<ng-transclude></ng-transclude>',
  link: function(el) {
    var child = angular.element("<div/>");
    el.append(child);
  }

我可以将此指令迁移到Angular 2,如下所示:

@Directive({
  selector: '[mydirective']
})
export class MyDirective implements OnInit {
  constructor(private elementRef: ElementRef) { }

  ngOnit() {
    var child = angular.element("<div/>");
    this.elementRef.nativeElement.append(child);
  }
}

令我不安的是nativeElement官方文件中的这句话:

当需要直接访问DOM时,使用此API作为最后一个资源.

我的问题是 - 我怎样才能将此指令正确地迁移到Angular 2？我唯一的要求是动态构建一个元素,并使用该指令将其附加到元素.

是否可以限制哪个组件可以具有自定义指令？

例如：

@Directive({ 
    selector: '[myHighlight]', 
    host: "my-component" //!!!!!!!!!
})
export class HighlightDirective {
    constructor(el: ElementRef) {  //el is my-component - can not be nothing else !!!!
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

@Component({selector: "my-component"})...

用例：
我想为特定的第三方组件编写指令。我将使用该第三方组件属性，因此在另一个组件上的指令没有任何意义并且会引发错误。

这意味着myHighlightondiv将被忽略。

我正在创建一个自定义* ngIf指令，以在加载时用占位符替换内容。我可以根据需要进行所有工作并在* ngIf指令之后对其进行建模（https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_if.ts）唯一不起作用的是as语法，但看不到任何引用或从何处开始。

*myCustomDirective="loading$ | async as result" 

上面的方法不起作用，当loading $ observable发出数据时，结果是不确定的。显示占位符，但是按预期将其替换为内容。（尽管由于不确定的结果，内容还是有错误）