标签: angular2-components

我需要将表达式传递给将在组件模板中进行求值的组件.

例如,组件:

@Component({
  selector: 'app-my-component',
  ...
})
export class MyComponent {
  @Input items: MyClass;
  @Input expression: String;
  ...
}

使用组件的模板:

<div *ngFor="let item of items">
  {{expression}}
</div>

MyComponent的用法:

<app-my-component [items]="listOfItems" [expression]="'[item.id] item.name'">
</app-my-component>

由于将有多个输入,我想避免使用TemplateRef.

我一直在研究Angular 2 API ComponentResolver以及DynamicComponentResolver创建动态组件,但我有一些不同于那些API提供的东西.

在NG2中是否有任何方法可以基于其类名字符串创建组件？

例如,我正在构建一个可配置的图表仪表板.每个用户的布局都存储在数据库中,说明他们需要2x折线图,3x条形图等.

当我将这些数据加载为json时,它看起来像:

user.charts = [
     { type: 'LineChartComponent', position: ... }
     { type: 'BarChartComponent', position: ... }
];

type我想要反射创建的组件的类名在哪里.

到目前为止,我有以下内容:

 this.chartMap = {
    'LineChartComponent': LineChartComponent
 };

let config = this.configuration;
let chartComponentType = this.chartMap[config.type];
let factory = this.componentFactory.resolveComponentFactory(chartComponentType);
let component = factory.create(this.injector);
component.instance.configuration = config;
this.chartContainer.insert(component.hostView);

但整个想法是消除对的需要chartMap.如何在不引用类型的情况下基于字符串反射性地创建此类？

我有大量数据要显示在屏幕上。我需要提供一个简化的列表，以便用户可以选择其中一个项目并查看其详细信息。

所以想象我有一个组件 SimpleListComponent，它将保存数据并呈现一个简化的视图

export class SimpleListComponent{
    @Input() data: any[];
}

html

<ul>
    <li *ngFor="let item of data">
        <a>{{item.name}}</a>
    </li>
</ul>

用户应该能够单击其中一个项目并在新选项卡中打开包含该项目详细信息的视图。所以如果我有第二个组件

export class DetailedViewComponent{
    @Input() item: any;
}
<div>
    <!--All fields of item here-->
</div>

编辑：这里的问题是我从一个非常定制的搜索中呈现数据，所以我没有一个 ID 来从服务器获取详细信息或以任何其他方式再次获取数据。所以唯一的方法就是以某种方式传递已经加载的数据。

我怎样才能在角度上实现这一目标？将项目数据提供给第二个组件并在新选项卡中打开它？

这是关于Angular 2选择器,自定义标签与自定义属性,SEO和浏览器呈现的问题.

当我第一次开始查看Angular 2时,我在跟随他们的快速启动时做的第一件事,即蝙蝠的权利,就是将我的选择器更改为'[my-component]'(属性选择器)而不是'my-component'(标签选择器),所以我可以<div my-component></div>在我的html中而不是<my-component></my-component>,这是无效的HTML.所以我会根据标准写html.好吧,至少非常接近标准(因为my-component它不是一个有效的html属性,但我只能接受那个html验证错误)

然后,在youtube上的某个视频中,角色团队的某个人提到我们应该使用标签选择器,至少在性能方面.

好吧我说,螺旋html验证......或者不应该我？
所以:

1. 假设我忽略了W3C尖叫我的html完全无效,因为<custom-tags>.我实际上有另一个更大更真实的问题:这对SEO有何影响？
   我的意思是不要只考虑客户端应用程序,因为在现实世界中(以及我的角度2项目)我也有服务器端渲染,因为2个非常重要的原因:SEO和快速初始渲染网站到应用程序引导之前的初始视图的用户.否则你不能拥有非常高的交通SPA.
   当然,谷歌将抓取我的网站,无论我使用哪个标签,但它会在两种情况下对它进行排名:一个与<custom-make-believe-tags>另一个只有标准的html标签？

2. 我们来谈谈浏览器和CSS:

当我开始在Angular 2中构建我的第一个SPA站点时,我立即面临另一个问题:
Say(在非SPA站点中)我有以下html标记:

<header>
    <a class="logo">
        ...
    </a>

    <div class="widgets">
        <form class="frm-quicksearch"> ... </form>
        <div class="dropdown">
            <!-- a user dropdown menu here -->
        </div>
    </div>
</header>

<div class="video-listing">
    <div class="video-item"> ... </div>
    <div class="video-item"> ... </div>
    ...
</div>

Angular 2明智我将拥有以下组件树:

<header-component>
    <logo-component></logo-component>
    <widgets-component>
        <quicksearch-component></quicksearch-component>
        <dropdown-component></dropdown-component>
    </widgets-component>
</header-component> …

我在Angular 2应用程序中有三个组件:C0,C1和C2.第一个(C0)表示一个html模板,具有多个子组件(ui元素).现在,如果有人点击C1(菜单)中的按钮,我该如何通知C2(日历)呢？

我尝试了角度站点的组件通信页面中的一些示例.我最终得到了一种方法,我在C1处获取了一个EventEmitter,以通知父C0.然后使用setter通知C2.

这有效,但看起来非常凌乱,即使对于充满活动的手.如果我的应用程序最终可能有数百个事件,那么这个解决方案就无法解决.

有没有更好的方法来处理这种沟通？

使用Angular 4.1,我试图在模块渲染之前动态更改模块类型的模板.这可能吗？

我们在页面上引导未知数量的组件(来自已知的组件类型列表),并且页面可能包含多个相同类型的组件.我发现了一种方法可以为每个组件提供一个不同的选择器,这样它们就可以单独渲染(即使它们属于同一类型),但我还需要给每个组件一个不同的模板. 模板应该是所选元素的内部HTML.

这是代码:

import { Component, NgModule, Inject, ApplicationRef, ComponentFactoryResolver, OpaqueToken, Type } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyNavComponent } from './MyNav.component';
import { MyRotatorComponent } from './MyRotator.component';
import { MySignUpComponent } from './MySignUp.component';

export const BOOTSTRAP_COMPONENTS_TOKEN = new OpaqueToken('bootstrap_components');

@NgModule({
    imports: [BrowserModule],
    declarations: [
        MyNavComponent,
        MyRotatorComponent,
        MySignUpComponent
    ],
    entryComponents: [
        MyNavComponent,
        MyRotatorComponent,
        MySignUpComponent
    ],
    providers: [
        {
            provide: BOOTSTRAP_COMPONENTS_TOKEN,
            useValue: [
                { type: MyNavComponent },
                { type: MyRotatorComponent },
                { type: MySignUpComponent …

我正在使用Angular 2-rc3并且Component我想要以一种不同的方式应用转换.这是我的组件:

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

@Component({
    selector: 'my-list',
    template: `<ul>
        <li *ngFor="let item of data">
            -- insert template here --
            <ng-content></ng-content>
        </li>
    </ul>`
})
export class MyListComponent {
    @Input() data: any[];
}

我这样使用它:

<my-list [data]="cars">
    <div>{{item.make | uppercase}}</div>
</my-list>

如您所见,我正在尝试定义将由我的组件使用的内联模板.现在这非常错误.首先,一个数据绑定异常说出来can't read property 'make' of undefined.它试图读取item.make我周围的组件,而不是MyListComponent.但即使我暂时禁用此功能:

<my-list [data]="cars">
    <div>{item.make | uppercase}</div>
</my-list>

然后出现第二个问题:

-- insert template here --
-- insert template here --
-- insert template here --
-- …

我正在使用subject作为我的angular2应用程序中组件的通信服务的服务.

通话方式:

this.notification.create('test');

服务:

export class NotificationService {
  private static notificationSource = new Subject<any>()

  notiCreated$ = NotificationService.notificationSource.asObservable();

  create(message) {
    NotificationService.notificationSource.next(message);
  }
}

被叫功能:

  this.subscription = notification.notiCreated$.subscribe(
    data => {
       console.log(data);
       this.createNotification(data, 'warning');
  });

但我想通过2个参数.我有错误.

我该怎么做？

从官方文档我们知道

组件装饰器允许您将类标记为Angular组件,并提供其他元数据,以确定如何在运行时处理,实例化和使用组件.

但我想更深入地了解组件装饰器除了提供额外的元数据之外真正做了什么.

我潜入了源代码,发现所有装饰器都是在makeDecorator函数的帮助下创建的.在这里,我迷路了.Component和ngModule装饰器的示例区别在哪里？他们做同样的事吗？不要这么认为.

就像一个答案一样,如果没有makeDecorator函数重新创建Component Decorator,我需要一步一步地描述我应该做些什么.

UPD:是的,当然,我知道TypeScript Decorators是如何工作的.

我正在使用Angular 2来构建我的Web应用程序,其中包含许多组件.我正在使用angular-cli来创建,运行和构建项目.
偶然(或幸运)我偶然发现了一个错误,我意识到我的组件的多个实例正在创建.更糟糕的是当我意识到我的代码是随机引用任何一个这样的实例而没有任何逻辑来追溯它.

例如,请检查以下方案:

• 我登录了我的应用程序并在特定组件中进行了REST调用(在窗口调整大小事件上)
• 这里重要的一点是每个用户都有一个在REST调用中使用的唯一ID
• 然后我从该用户注销并使用其他用户登录
• 我回到相同的组件并进行了相同的休息调用(再次对窗口调整大小事件),但令我震惊的是,其余一些调用是使用唯一ID或更早登录的用户进行的
• 为了检查我的怀疑,我在构造函数中创建了一个第一个类变量,它基本上存储了值.这将转向告诉我何时实例化类.Date.now()
• 然后我添加了一些console.log()语句,告诉我哪个实例是由我的变量的值调用的.
• 日志证实了我怀疑多个实例确实同时存在,并且没有一定的逻辑或路径可以访问其中任何一个.

这是我的日志声明的图像.我已经把敏感部分搞砸了.可以清楚地看到,一些休息呼叫正在使用租户1的唯一ID,而一些用于试用租户.从两个实例时间也可以非常清楚地使用两个实例.以前登录的租户的旧实例在某种程度上仍在使用中,我的组件仍然可以访问它.

我的问题是:

1. 有没有办法让组件类单例化？
2. 有没有办法在离开组件时销毁组件实例？