标签: angular-components

我正在将代码从Angular 1.3迁移到Angular 1.5组件和ES6控制器.我试图在这里找到一些东西,但没有足够的帮助.除了下面提到的方式之外,如何在范围内观看事件所需的建议.或者如何从指令触发范围事件.如果存在替代方案,也请建议正确的方法.

Angular 1.3

angular
.module('test')
.directive('test', function() {
    return {
        link: function(scope) {
            scope.$on('$stateChangeStart', function(event, toState, toParams) {
                //logic goes here..
            });
        }
    }
});

Angular 1.5/ES6

class TestController {
    /* @ngInject */
    constructor($scope) {
        this._$scope = $scope;
    }

    $onInit() {
        this._$scope.$on('$stateChangeStart', (event, toState, toParams) => {
            //logic goes here
        });
    }
}

angular
.module('test')
.component('test', {
    controller: TestController
});

编辑:

有兴趣选择$ on而不是$ watch,因为$ onChange可以在你看变量时替换$ watch.我想听范围事件,因为不是100%的angular 1.3代码可以迁移到1.5,我仍然有指令触发范围上的事件!

在这里参考Angular2文档文件:[ https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child-setter](父对子设定者),我有以下子组件代码:

import { Component, Input } from '@angular/core';
@Component({
  selector: 'name-child',
  template: '<h3>"{{name}}"</h3>'
})
export class NameChildComponent {
  private _name = '';
  @Input()
  set name(name: string) {
    console.log("name change");
    this._name =  name;
  }
  get name(): string { return this._name; }
}

父母很简单:

import { Component } from '@angular/core';
@Component({
  selector: 'name-parent',
  template: `
  <h2>Parent </h2>
  <name-child [name]="name"></name-child>
  `
})
export class NameParentComponent {
   // somewhere on ngOnInit, set name without changing value
    ngOnInit() { 

        // get pending paged …

我刚刚使用ng2 cli安装了一个bearbones ng2 app.在我的AppModule添加中schema: [ CUSTOM_ELEMENTS_SCHEMA ],在我的AppComponent模板中,我有<row></row>.但我得到 -

未处理的Promise拒绝:模板解析错误:'row'不是已知元素:1.如果'row'是Angular组件,则验证它是否是此模块的一部分.2.如果'row'是Web组件,则将"CUSTOM_ELEMENTS_SCHEMA"添加到此组件的'@NgModule.schemas'以禁止显示此消息.("[错误 - >]

AppModule-

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }

AppComponent-

import { Component …

我有这个组件通过其选择器接收两个输入,但这可以扩展到任意数量的输入和任何组件.因此,在组件本身消耗多个属性的过程中,单个@Input()装饰器不允许我使用多个属性,因此作为一种解决方法,我使用了两个装饰器用于两个输入属性,但我不认为这是解决的唯一方法这样的场景.

export class AsyncComponent {
     @Input() waitFor: boolean;
     @Input() message: string; // TODO: Verify if multiple inputs are needed for multiple props
 }

更新

<app-async [waitFor]="true" message="foo"><app-async>

那么,是否有可能用任何其他方式只使用一个装饰器来获取任意数量的输入道具？如果有更多的道具,我路过除了waitFor和message我会做的每个支撑以下.

 @Input() waitFor: boolean;
 @Input() message: string;
 @Input() someOtherProp: string;
 ....

或者有没有其他方法只有一个Input装饰器并消耗任何数量的属性？

我创建了img-pop组件,它具有@Input()绑定属性src.我创建了authSrc指令,它具有@HostBinding()属性src.

@Component({
selector: 'img-pop',

template: `<img [src]="src"/>
            <div *ngIf="isShow">
                 <----extra value----->
            </div>`
})

export class ImgPopOverComponent implements OnInit {

@Input()
private src;

private isShow=false;

@HostListener('mouseenter') onMouseEnter() {
    this.isShow= true;
}

@HostListener('mouseleave') onMouseLeave() {
    this.isShow= false;
}

}

我有这样的指示.

@Directive({ selector: '[authSrc]' })
export class AuthSrcDirective implements OnInit {

@HostBinding()
private src: string;

constructor(private element: ElementRef) { }

ngOnInit() { }

  @Input()
  set authSrc(src) {
   this.src = src+"?access_token=<-token->";
  }
}

我希望将两种功能结合在一起.

<img-pop [authSrc]="/api/url/to/image"></img-pop>

所以最终的url调用将是/ api/url/to/image？access_token = < …

我有一个要求,我需要根据数据加载不同的版本模块.

像月度数据这样的东西,如果我当前月份的模块代码发生了一些变化,那么上个月页面的视图/逻辑不应该有任何变化,数据也是如此,因此视图也是如此.

我打算为每个模块创建自定义库.有了这个,我可以用模块版本映射我的数据.

由于我的应用程序很大并涉及如此多的模块和版本,因此我无法将所有版本的模块/库带到客户端.

有人可以提出更好的方法来处理这个要求吗？

我的情况:

我有一个组件显示tile,每个tile表示一个数组中的对象,该数组通过ngfor循环.单击一个图块时,我想将该对象传递给另一个组件,该组件负责在可以修改的字段中显示该对象的所有属性.

我尝试过的:

在做了一些研究并发现多个帖子向我展示了如何为父子层次结构实现这一点以及一些帖子解释为了实现想要的功能需要使用共享服务,我决定尝试设置这样的服务.

然而,我似乎没有得到的是当我应该导航到不同的路线.似乎导航在早期找到了位置,因为在详细信息组件中检索它时,传递给服务的对象是未定义的.

我的代码:

显示切片的组件具有以下功能,可将单击的对象传递给共享服务:

editPropertyDetails(property: Property) {
    console.log('Edit property called');

    return new Promise(resolve => {
      this.sharedPropertyService.setPropertyToDisplay(property);
      resolve();
    }).then(
      () => this.router.navigate(['/properties/detail'])
    )
  }

共享服务具有设置属性对象的功能和检索它的功能,如下所示:

@Injectable()
export class SharedPropertyService {
  // Observable
  public propertyToDisplay = new Subject<Property>();

  constructor( private router: Router) {}

  setPropertyToDisplay(property: Property) {
    console.log('setPropertyToDisplay called');
    this.propertyToDisplay.next(property);
  }

  getPropertyToDisplay(): Observable<Property> {
    console.log('getPropertyToDisplay called');
    return this.propertyToDisplay.asObservable();
  }
}

最后是必须接收被单击的对象但获取未定义对象的detail组件:

export class PropertyDetailComponent implements OnDestroy {

  property: Property;
  subscription: Subscription;

  constructor(private sharedPropertyService: SharedPropertyService) {
        this.subscription = this.sharedPropertyService.getPropertyToDisplay()
          .subscribe(
            property …

我正在制作一个模态，并将其作为一个组件<modal-component>。

里面<modal-component>有一个关闭按钮。<modal-component>当我点击那个按钮时我想销毁。

像这样的东西：

<button (click)="closeModal()">Close</button>

我还可以将关闭按钮作为一个组件。如果有必要的话<close-modal>。

这可能吗？

在我的 Angular 应用程序中：

• 当组件使用在其直接父（抽象）类中定义的输入时，一切正常。

• 当组件使用在 2 级以上父（抽象）类中定义的输入时， 或 会ng build给出ng serve错误。

例如，我有4个课程：

export abstract class AbstractAComponent {
  @Input() myInput: string;
}

export abstract class AbstractBComponent extends AbstractAComponent {}

@Component({
  selector: 'app-one',
  templateUrl: './one.component.html',
  styleUrls: ['./one.component.scss']
})
export class OneComponent extends AbstractAComponent {}

@Component({
  selector: 'app-two',
  templateUrl: './two.component.html',
  styleUrls: ['./two.component.scss']
})
export class TwoComponent extends AbstractBComponent {}

这就是我使用它们的方式：

<app-one [myInput]="'value 1'"></app-one>
<app-two [myInput]="'value 2'"></app-two>

简而言之： -@Input() myInput定义在AbstractAComponent -OneComponent直接扩展AbstractAComponent - TwoComponentextends …

我正在尝试开发一个新的库，打算将其放入三个新的 Angular 应用程序中，以及几个扩展来自该库的组件的组件，然后由这三个应用程序使用。在我看来，自然结构是每个应用程序、库和每个组件都有一个单独的存储库。

my-lib.git
app1.git
app2.git
component1.git
component2.git

然而，到目前为止我看到的每一篇文章都是从创建工作区并在其中构建库开始的。由于每个组件都将在自己的时间线上开发和分发（通过私有 Gitlab，而不是 npm），应用程序开发人员会选择要包含哪些组件的版本，因此我觉得将它们全部放入一个存储库中是不对的。

为此我应该使用什么存储库结构以及如何开发 Angular 库而不将它们全部放入工作区？