标签: angular

我正在尝试设置一个标签系统,允许组件自己注册(带标题).第一个选项卡就像一个收件箱,有大量的操作/链接项可供用户选择,每个点击都应该能够在点击时实例化一个新组件.动作/链接来自JSON.

然后,实例化的组件将自己注册为新选项卡.

我不确定这是否是"最佳"方法？Sofar我见过的唯一指南是静态标签,这没有帮助.

到目前为止,我只有主要引导的标签服务在整个应用程序中持续存在,看起来像这样的东西.

export interface ITab { title: string; }

@Injectable()
export class TabsService {
    private tabs = new Set<ITab>();

    addTab(title: string): ITab {
        let tab: ITab = { title };
        this.tabs.add(tab);
        return tab;
    }

    removeTab(tab: ITab) {
        this.tabs.delete(tab);
    }
}

问题:

1. 如何在收件箱中创建一个动态列表来创建新的(不同的)标签？我有点猜测DynamicComponentBuilder会被使用吗？
2. 如何从收件箱创建的组件(单击时)将自己注册为选项卡并显示？我猜ng-content,但我找不到有关如何使用它的更多信息

编辑:尝试澄清

将收件箱视为邮件收件箱,将项目作为JSON提取并显示多个项目.单击其中一个项目后,将创建一个新选项卡,其中包含该项操作"类型".然后类型是一个组件

Edit2:图片

http://i.imgur.com/yzfMOXJ.png

我使用angular2.0.0-beta.7.将组件加载到/path?query=value1重定向到的路径上时/path.为什么要删除GET参数？如何保存参数？

我在路由器中有错误.如果我有像这样的主要路线

@RouteConfig([
  {
      path: '/todos/...',
      name: 'TodoMain',
      component: TodoMainComponent
  }
])

和我的孩子一样的路线

@RouteConfig([
  { path: '/', component: TodoListComponent, name: 'TodoList', useAsDefault:true },
  { path: '/:id', component: TodoDetailComponent, name:'TodoDetail' }
])

然后我无法在TodoListComponent中获取参数.我能得到

params("/my/path;param1=value1;param2=value2") 

但我想要经典

query params("/my/path?param1=value1&param2=value2")

我正在创建我的第一个Angular应用程序,我会弄清楚模块加载器的作用是什么.为什么我们需要它们？我试图在Google上搜索和搜索,我无法理解为什么我们需要安装其中一个来运行我们的应用程序？

仅仅用于import从节点模块加载东西是不够的？

我已经按照本教程(使用SystemJS),它让我使用systemjs.config.js文件:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'transpiled', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs': …

我尝试将它与typescript绑定一起使用:

npm install moment --save
typings install moment --ambient -- save

test.ts:

import {moment} from 'moment/moment';

没有:

npm install moment --save

test.ts:

var moment = require('moment/moment');

但是当我调用moment.format()时,我收到一个错误.应该很简单,任何人都可以提供一个可行的命令行/导入组合吗？

在AngularJS中,您可以使用$watch函数来指定观察者观察范围变量的变化$scope.在Angular中观察变量(例如,组件变量)的等价物是什么？

我正在努力学习Angular 2.

我想使用@ViewChild Annotation 从父组件访问子组件.

这里有一些代码行:

在BodyContent.ts我有:

import {ViewChild, Component, Injectable} from 'angular2/core';
import {FilterTiles} from '../Components/FilterTiles/FilterTiles';


@Component({
selector: 'ico-body-content'
, templateUrl: 'App/Pages/Filters/BodyContent/BodyContent.html'
, directives: [FilterTiles] 
})


export class BodyContent {
    @ViewChild(FilterTiles) ft:FilterTiles;

    public onClickSidebar(clickedElement: string) {
        console.log(this.ft);
        var startingFilter = {
            title: 'cognomi',
            values: [
                'griffin'
                , 'simpson'
            ]}
        this.ft.tiles.push(startingFilter);
    } 
}

而在FilterTiles.ts中:

 import {Component} from 'angular2/core';


 @Component({
     selector: 'ico-filter-tiles'
    ,templateUrl: 'App/Pages/Filters/Components/FilterTiles/FilterTiles.html'
 })


 export class FilterTiles {
     public tiles = [];

     public constructor(){};
 } …

我尝试使用"ng destroy component foo",它告诉我"Angular-CLI不支持destroy命令"

我们如何使用Angular CLI正确删除组件？

Lint错误消息:

src/app/detail/edit/edit.component.ts [111,5]:for(... in ...)语句必须用if语句过滤

代码片段(这是一个工作代码.它也可以在angular.io表单验证部分获得):

for (const field in this.formErrors) {
      // clear previous error message (if any)
      this.formErrors[field] = '';
      const control = form.get(field);

      if (control && control.dirty && !control.valid) {
        const messages = this.validationMessages[field];
        for (const key in control.errors) {
          this.formErrors[field] += messages[key] + ' ';
        }
      }
    }

知道如何修复这个lint错误吗？

我想基于窗口重新调整大小事件(加载和动态)执行一些任务.

目前我有我的DOM如下:

<div id="Harbour">
    <div id="Port" (window:resize)="onResize($event)" >
        <router-outlet></router-outlet>
    </div>
</div>

事件正确触发

export class AppComponent {
   onResize(event) {
        console.log(event);
    }
}

如何从此事件对象中检索宽度和高度？

谢谢.

我已经在CustomHttp 中读取了Access EventEmitter Service等问题,其中用户在其服务中使用了EventEmitter,但是他在本评论中建议他 不要使用它,而是直接在他的服务中使用Observables.

我还阅读了这个 问题 ,解决方案建议将EventEmitter传递给子节点并订阅它.

我的问题是:我应该,还是不应该手动订阅EventEmitter？我该怎么用？