个人中心
gpt4 book ai didi

javascript - 实例 Angular 2 组件两次

转载 作者：可可西里 更新时间：2023-11-01 01:42:09 25 4
gpt4 key购买 nike

我正在尝试学习 Angular 2，所以我制作了一些 hello world 示例。这是我的代码:

boot.ts

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {DataService} from './app.dataservice'

bootstrap(AppComponent, [DataService]);

index.html

...
<body>
    <hello-world>Loading...</hello-world>
    <hello-world>Loading...</hello-world>
</body>
...

app.component.ts

import {Component} from 'angular2/core';
import {DataService} from './app.dataservice'

@Component({
    selector: 'hello-world',
    template: '<h1>Hello {{ item }}</h1>'
})

export class AppComponent {
    items: Array<number>;
    item: number;

    constructor(dataService: DataService) {
        this.items = dataService.getItems();
        this.item = this.items[0];
    }
}

app.dataservice.ts

export class DataService {
    items: Array<number>;

    constructor() {
        this.items = [1,2,3];
    }

    getItems() {
        return this.items;
    }
}

代码似乎工作正常，因为第一个 hello-world 自定义标签与 ts 中的代码一起正确显示。但是，第二个 hello-world 标签没有被转换。仅显示一个自定义元素。

不能超过 1 个自定义标签？我该怎么做？

编辑

我在 app.components.ts 中添加了新的导入

import {ByeWorld} from './app.byeworld';

在 app.byeworld.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'bye-world',
    template: '<h1>Bye World</h1>'
})

export class ByeWorld {
    constructor() {
    }
}

最佳答案

我已经测试过了。你不能制作多个同名的 Angular 2 Main Components。但是对于非主要组件，您可以根据需要制作任意数量。

如何区分主成分和非主成分？

主要组件是被引导的组件。

看看屏幕截图。 enter image description here

我的主要组件叫做:我在 HTML 中做了两次:

<body>
  <my-app>Loading...</my-app>
  <my-app>Loading...</my-app>
</body>

可以看到，在图片底部的最后有一个loading

但是，它适用于非主要组件。如您所见，可以创建尽可能多的 my-hero-detail 组件。

<div class="center-align">
<h1>{{title}}</h1>
</div>
<div class="row" style="margin-bottom: 0;">
    <div class="col s12 m6">
        <div id="my-heroes" class="card">
            <div class="card-header">
                <span>My Heroes</span>
            </div>
            <div class="card-content">
                <ul class="heroes">
                    <li *ngFor="#hero of heroes" 
                        (click)="onSelect(hero)"
                        [class.selected]="hero === selectedHero">
                        <span class="badge">{{hero.id}}</span> {{hero.name}}
                    </li>
                </ul>   
            </div>
        </div>      
    </div>
    <my-hero-detail [hero]="selectedHero"></my-hero-detail>
</div>
<div class="row">
    <my-hero-detail [hero]="selectedHero"></my-hero-detail>
    <my-hero-detail [hero]="selectedHero"></my-hero-detail>
</div>

我的英雄详情组件:

import {Component} from 'angular2/core';
import {Hero} from '../hero';
@Component({
    selector: 'my-hero-detail',
    templateUrl: 'app/hero-detail/hero-detail.html',
    inputs: ['hero'],
})

export class HeroDetailComponent {
    public hero: Hero;
}

关于javascript - 实例 Angular 2 组件两次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34818238/

25 4 0
文章推荐： java - 报告设计无效。未找到字段 Jasper Reports
文章推荐： ios - 如果我不移动手指，则不会调用 touchesEnded
文章推荐： java - Java 中的数字文字 - 八进制？
文章推荐： ios - UIActivity activityViewController 在 Swift 中的 iPad 上崩溃
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com