标签: angular2-components

首先,如果这是一个可怕的设计,我很乐意改变.

在我index.html的身体中,有:

<month [year]="2016" [monthOfYear]="4">Loading...</month>

month.component.ts 那么:

import { Component, Input, OnInit } from '@angular/core';
import { DayComponent } from '../day/day.component';
import * as Models from '../../../models/_models';

@Component({  
  selector: 'month',
  moduleId: module.id,
  templateUrl: 'month.component.html',
  styleUrls: ['month.component.css'],
  directives: [DayComponent]
})

export class MonthComponent {  
  name: string;
  days: Models.Day[];
  @Input('year') year: number;
  @Input('monthOfYear') monthOfYear: number;
  month: Models.Month;

  ngOnInit() {
    this.month = new Models.Month(this.year, this.monthOfYear);
    this.name = this.month.getMonthName();
    this.days = this.month.days;
  }
}

...... ngOnInit()并被正确地称呼.然而,在调用(或许永远,但我不知道如何来确定),两者的时间year和monthOfYear是undefined …

我正在创建一个在我的应用程序中重复使用的组件，下面的重要代码

.ts

export class DieInputComponent {
  constructor(private sides: Number, private dice: Number) { 
  }
}

.html

<input type="number" placeholder="{{dice}}d{{sides}}"/>

我正在像这样在我的 html 模板中创建这些对象

<die-input></die-input>

我将如何在 html 标签中输入构造函数变量？对于我的生活，我找不到关于如何做的合适参考。

我有一个小的Plunk,我正在使用Angular 2中目前可用的新的Router 3.0 alpha.它一般运行良好,但问题是,一旦我点击一个路由到'detail'的链接具有特定ID的组件,当我单击具有不同ID的其他链接时,它永远不会更改.该组件永远不会被重新实例化,因此它只会在第一次加载时显示它被传递的内容.

这是有问题的组件:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ContactsService } from './contacts.service';

@Component({
  selector: 'contacts-detail',
  template: `
    <h2>{{contact.name}}</h2>
  `
})
export class ContactsDetailComponent implements OnInit { 

  constructor(private contactsService: ContactsService, private route: ActivatedRoute) {
  }

  ngOnInit() {
    this.contact = this.contactsService.getContact(this.route.snapshot.params.id);
    console.log('Fetching user', this.route.snapshot.params.id);
  }
}

以下是Plunk展示了这个问题.单击一个作者姓名,然后单击另一个作者名称以查看其不更改.

我有一个子组件，从其父组件接收数据并在 div 中显示文本。父母可能将其undefined作为数据发送。当它这样做时，div 应该将其高度转换为 0，这是我通过 css transition 完成的。由于我不知道文本的长度，因此 div 的高度应该转换为auto. 我找到了一个这样做的代码示例，我已经将其转换为适合我的组件。

export class LanguageDetail implements OnChange, OnInit {
    @Input() language: Language
    @ViewChild("detailPanel") detailPanel: ElementRef;

    private shownLanguage: Language;

    ngOnInit() {
        this.shownLanguage = new Language();
    }

    ngOnChange() {
        if (this.detailPanel) {
            var detailPanel: JQuery = $(this.detailPanel.nativeElement);

            if (this.language) {
                ...
                // calculate the end height and apply a transition with fixed values to this.shownLanguage
                this.shownLanguage = this.language;

                oldHeight = detailPanel.height();
                detailPanel.height("auto");
                newHeight = detailPanel.height();
                detailPanel.height(oldHeight);
                ...
            } else …

我正在使用最终的Angular 2发行版.我已经设置了官方网站angular 2 quickstart中提到的启动文件.在我的app.component.ts文件中,我制作了2个组件.代码如下所示: -

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

@Component({
    selector: 'demo',
    template:`
        <h2>Hi, demo !!</h2>
    `
})

export class DemoComponent implements OnInit{
    constructor(){}

    ngOnInit(){

    }
}

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

})
export class AppComponent implements OnInit{ 
    constructor(){}
    ngOnInit(){

    }
}

在my-app的组件中,我使用了指令选择器,它是一个数组.但编辑器(VS Code)显示错误.chrome控制台抛出错误,告诉 模板解析错误:'demo'不是已知元素:

请帮我解决这个问题.谢谢

这是我的app.module.ts文件

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

我实际上想要在按钮(在btn.component.html中)上应用特定类,如果它通过选择器传递的话.

我的选择器是

<btn></btn>

btn.component.ts是

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

@Component({
  selector: 'btn',
  template: require('./btn.component.html')
})

export class BtnComponent { }

btn.component.html是

<button>Okay</button>

我是npm中配置部分的新手，我试图在使用angular-cli（ng init）创建的angular 2项目中使用handsontable库。我为它添加了打字稿定义。

这是我的app.compponent.ts

import { Component } from '@angular/core';
import 'handsontable/dist/handsontable.full.js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
  ngOnInit() {
  }
  ngAfterViewInit() {
    const myData = [
            ["1", "2", "3", "4", "5", "6"]
        ];

        const config = {
            data: myData,
            colHeaders: ['A', 'B', 'C', 'D', 'E', 'F'],
            startRows: 5,
            startCols: 5,
            minSpareCols: 1,
            //always keep at least 1 spare row at the right
            minSpareRows: 1
            //always keep at least 1 …

我必须在这里做错事,但我不知道是什么......我是一个Angular2新手在我的第一个ng2应用程序中磕磕绊绊.

我正在尝试从组件内访问服务上的方法,但该服务仅在构造函数()和ngOnInit()中定义,它在我的其他组件函数中返回为未定义.

这与此问题类似,但我使用的是private关键字,但仍然存在问题.

这是我的服务:

import { Injectable } from "@angular/core";
import { AngularFire,FirebaseListObservable } from 'angularfire2';
import { User } from './user.model';

@Injectable()

export class UserService {
    userList$: FirebaseListObservable<any>;
    apples: String = 'Oranges';

    constructor(private af: AngularFire) {
        this.initialize();
    }

    private initialize():void {
        this.userList$ = this.af.database.list('/users');
    }

    getTest(input:String):String {
        return "Test " + input;
    }

    getUser(userId:String):any {
        //console.log('get user',userId);
        let path = '/users/'+userId;
        return this.af.database.object(path);
    }
}

我的组件:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } …

我有两个不同的组件 - 一个组件具有列表用户的click事件方法,我想继承(调用)详细页面上的click事件方法(另一个组件))

怎么做,请帮帮我...

答案更新

谢谢你的答案.

我通过在构造函数中使用扩展类和使用super()来获得解决方案.

头等舱

export class TeamsView {
   constructor(private test:TestService){
   }
   ...
}

二等

export class TeamsForm extends TeamsView {
   constructor(private test:TestService, private router: Router){
     super(test)
   }
   ...
}

假设我有一个Component主要细节.我想URL反映细节部分的变化而不重新加载整个Component.

这就是我所拥有的:

home.routing.ts

import { ModuleWithProviders } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

import { HomeComponent } from "./home.component";
import { ItemListComponent } from "./item-list.component";

const homeRoutes: Routes = [
    {
        path: "home",
        component: HomeComponent,
        children: [
            {
                path: ":categoryId",
                component: HomeComponent
            }
        ]
    },
    {
        path: "home",
        component: HomeComponent
    }
];

export const homeRouting: ModuleWithProviders = RouterModule.forChild(homeRoutes);

home.component.ts

import { Component, OnInit } from "@angular/core";
import { Router, ActivatedRoute, Params } from …