Блог

Главная - Вопросы по программированию - Проблема с пользовательским компонентом в Angularjs2

Проблема с пользовательским компонентом в Angularjs2

#angularjs #angular #angularjs-directive

#angularjs #angular #angularjs-директива

Вопрос:

Я пытаюсь изучить Angularjs2 и создать свое первое приложение, но оно работает неправильно, а также не показывает никаких ошибок. Я создал компонент «my-app» с некоторым HTML-кодом «Первое приложение Angular 2 — это мой компонент«, этот компонент работает нормально, но когда я создал новый компонент с именем «my-component» с текстом «Привет, я {{name}}», он не отображается в браузере.

Также, когда я пытаюсь удалить текстовую форму «my-app», например:

Текст: «Angular 2», поэтому он показывает мой предыдущий текст, который является «Первым приложением Angular 2»

Пожалуйста, проверьте, что я делаю неправильно в приведенном ниже коде:

index.html:

 <!doctype>
<html>
<head>
    <base href="/angular2_project/">
    <title>Angular 2</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.js"></script>


    <link rel="stylesheet" href="src/css/app.css">
</head>
<body>
<my-app>Loading...</my-app>

<script>
    System.config({
        packages: {
            app: {
                format: 'register',
                defaultExtension: 'js'
            }
        }
    });
    System.import('app/boot')
            .then(null, console.error.bind(console));
</script>
</body>
</html>

boot.ts:

 import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from "./app.component";

bootstrap(AppComponent);

app.component.ts:

 import {Component} from 'angular2/core';
import {MyComponentComponent} from './my-component.component';

@Component({
    selector: 'my-app',
    template: `
        <h1>Angular 2 First App</h1>
        <h2>Here is my component</h2>
        <my-component></my-component>
    `,
    directives: [MyComponentComponent],
})
export class AppComponent {

}

my-component.component.ts:

 import {Component} from 'angular2/core';

@Component({
    selector: 'my-component',
    template: `
        Hi, I am {{name}}
    `,
})

export class MyComponentComponent {
    name = 'Ovais';
}

Комментарии:

1. При перезапуске системы все работает нормально, но почему это не меняется мгновенно?

2. Не изучайте это. это старый способ сделать это. изучите новую версию Angular2. это изменено.

3. @micronyks, не могли бы вы, пожалуйста, предложить мне какой-нибудь учебник или статью, которые могут помочь изучить Angularjs2?

4. angular.io

5. Попробуйте использовать angular cli, это быстро и избавит вас от необходимости включать скрипты в ваш индексный файл.