标签: angular-components

在这个例子中，来自官方的 Angular 2 文档，装饰器看起来像这样：

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular App</h1>'
})

例如：宁愿不要没有使用非标准的元素充斥我的HTML代码，并希望类似的信息（注意：ng-angular仅仅是我想看到的例子）：

import { Component } from '@angular/core';
@Component({
  template: '<h1>Wait! Bloody wait some more.</h1>'
})
export class ListComponent { }

并使用了这样的东西：

<div ng-component="List"</div>

抑或是一个组件装饰像这样仅当您要创建一个新的HTML元素，然后坚持一个普通Listcontroller的div在我上面的例子？

如何限制组件在背压时加载.实际上我有三个组件A(正常组件),B(LoginComponent)和C(Otp验证组件).我在某个按钮点击时从A路由到组件B,从B到C路由到组件B以验证用户.现在在对组件C进行验证之后,我想回到组件'A',并希望从历史记录中删除组件'B'和'C',以便在从浏览器返回时不加载'B'(LoginComponent)和'C'再次.那怎么能在angularjs 2中做到这一点.

我是Angular的新手,目前正在使用1.6版本.

我正在实现Angular的组件样式.我只是想问一下从父组件到子组件进行通信的最佳方式是什么？我知道存在一个问题,但我有一个特定的场景(我不确定它是否是唯一的).

这是场景:

模态 - >创建新待办事项 - >父(更新对象) - >个人待办事项(更新列表)

1. 我有一个创建待办事项的模式.
2. 然后在创建新的todo之后传递父对象的值以更新todo的对象.
3. 当我更新todo的父列表传递给个人todo组件以更新视图上的列表.

  angular.module('tab')
    .controller('TabController', TabController);

  function TabController() {
    let vm = this;
    let updatedTodoObject = {};

    vm.$onInit = function () {
      vm.personalTodo = vm.todo.own_todo;
      vm.externalTodo = vm.todo.external_todo;
    }

    vm.$onChanges = function (changes) {
      console.log('I\'m triggered');
    }

    vm.updateTodoList  = updateTodoList;

   function updateTodoList( result ) {
    updatedTodoObject = angular.copy(vm.todo);
    updatedProjectObject.user_todos.push(result)
    if( vm.todo !== updatedTodoObject) {
     vm.todo = updatedTodoObject;
    } else {
     console.log("Still in reference");
    }
   }

    vm.getUpdatedTodotList = function( ) { …

根据AngularJS开发人员指南 - 指令"隔离指令的范围",范围绑定可以在3种类型中完成

=,@和&

和

根据本页的"指令定义对象"部分,范围绑定可以在4种类型中完成

=,@,&和<

即使在大多数在线文章中,也只提供了3种类型的范围绑定.

哪个是对的？

有没有办法将类应用于Angular中的每个路由组件.一种方法是使用host每个组件的属性

@Component({
    moduleId: module.id,
    selector: 'one',
    host :{class :'my-class'}
    templateUrl: 'one.html',
})

但我不想为每个组件写这个.

是的,我看到其他人得到了这个错误,我只是不知道如何在我的代码中修复它

private _url = 'https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,LTC,EOS,DASH&tsyms=USD'

如果我没有return它没有崩溃与错误,但我确实想要返回数据.

我有一个调用此方法的组件(在此服务ts文件中)

订户:

getAllCoins() {

    var blah = [];

    return this.getCoins().subscribe(
        data => {
            blah = data;               
            //console.log('subscriber coins', blah)
        }
    )

}

调用此代码

getCoins() {
    return this.http.get(this._url)
        .map((response: Response) => response.json())
        //.do(data => console.log(data))
        .do(data => console.log('All: ' + JSON.stringify(data)))  // do operator to peek 
        .catch(this.handleError);
}

现在,我看到来自url的数据看起来像这样

{
"BTC": {
  "USD": 3349.1
},
"ETH": {
  "USD": 296.3
},
"LTC": {
  "USD": 47.56
},
"EOS": {
  "USD": 1.83
},
"DASH": {
  "USD": …

我是Angular 2的初学者,并开始使用由这些文件组成的小项目:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { MaterialModule } from './material/material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    MaterialModule,
    BrowserAnimationsModule,
    AppComponent,
    NgModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'App Title';
}

app.component.html

<span>Welcome …

我是Angular的新手.当我在做Heros教程时,我注意到组件构造函数参数的类型必须是依赖项.换句话说,我必须将它包含在providers数组中.

例如:

import { SomeServiceClass } from '...';
@Component({
  ...
})
export class MyComponent implements OnInit {

  constructor(input1: SomeServiceClass) { }

  ngOnInit() {
  }
}

除非我在providers数组中包含SomeServiceClass,否则此代码不会起作用.我试过了input1: string.它既不起作用!我相信它是完全有效的打字稿代码.问题必须是angular2实例化组件类的方式.

问题1:如何将组件分类实际由Angular实例化？

而且,由于我从不实例化服务类,我无法想象将哪个服务类实例传递给组件构造函数.

问题2:angular是否创建了每个组件使用的一个服务实例,或者为每个组件生成一个实例？

我正在尝试使用valor-software/ngx-bootstrap来创建动态选项卡,但我想将组件的选择器放在动态创建的选项卡内容中,

在文档示例中,我们有:

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'demo-tabs-dynamic',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './dynamic.html'
})
export class DemoTabsDynamicComponent {
  tabs: any[] = [
    { title: 'Dynamic Title 1', content: 'Dynamic content 1' },
    { title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: 
true },
    { title: 'Dynamic Title 3', content: 'Dynamic content 3', 
removable: true }
  ];

  addNewTab(): void {
    const newTabIndex = this.tabs.length + 1;
    this.tabs.push({
      title: `Dynamic Title ${newTabIndex}`,
      content: `Dynamic content ${newTabIndex}`, …

我想创建一个角度为7（前端）的Web应用程序，以动态加载不同类型的组件，例如本例 https://angular.io/guide/dynamic-component-loader

但是我不确定使用它是否是个好主意ComponentFactoryResolver。我从没用过，也不知道它是否稳定以及性能如何。

如果您知道替代方案，我希望您对此有意见。我不想用native innerHTML

我正在尝试创建具有动态步骤的自定义和通用向导。这个向导有

• 标头组件
• 向导步骤
• 一个“容器”，现在我使用ng模板显示每个步骤的内容，女巫是一个单独的组件。在某些情况下，复杂的组件
• 向导按钮（上一个下一个）和最后一步中的操作按钮（如保存等）

这些步骤是动态的。根据某些业务逻辑，可以弹出或删除先前步骤中用户输入的内容

我目前的实现方式如下，
我将仅向您展示我正在使用的部分，以使ComponentFactoryResolver您更容易理解和理解:)

export class WizComponent implements OnInit { 

  public wizContentItems: WizContentItem[] = undefined;
  public currentContentItem: WizContentItem = undefined;
  public currentContentItemNumber: number  = -1;

  public currentWizContentComponent: WizContentComponent = undefined;

  private componentRef: any;

  @Output() public onStepChanged = new EventEmitter<StepPosition>();

  private _position: StepPosition = StepPosition.First;

  constructor(private componentFactoryResolver: ComponentFactoryResolver, private viewContainerRef: ViewContainerRef) { }

  public ngOnInit() {
  } 

    public onSelectStep(contentItem: WizContentItem) {
        console.log("step was clicked");
        console.log(contentItem);

        if (this.currentContentItem …