Не получается вызвать компонент AngularJS 1.6

201

28 декабря 2018, 15:10

Не получается вызвать компонент в AngularJS 1.6.

Что только я уже не перепробовал.

Создаю проект с помощью ng new mcdates Потом npm install Затем npm init ввожу называние проекта, автора и т.п. Создаю компонент с помощью ng g c mc-dates

В папке mc-dates создаютсяя 4 файла. Вот код в файле mc-dates.component.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'mc-dates',
  templateUrl: './mc-dates.component.html',
  styleUrls: ['./mc-dates.component.css']
})
export class McDatesComponent {
  message = 'it works';
}

mc-dates.component.html:

<p>
  mc-dates status: {{ message }}
</p>

index.html :

<!doctype html>
<html lang="en" ng-app="">
<head>
  <meta charset="utf-8">
  <title>Mcdates</title>
  <base href="/">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
1 + 2 = {{ 1+2 }}
<app-root>Loading...</app-root> <!-- вызывается -->
<app-mc-dates>Loading...</app-mc-dates> <!-- не вызывается -->
</body>
</html>

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { McDatesComponent } from './mc-dates/mc-dates.component';
@NgModule({
  declarations: [
    AppComponent,
    McDatesComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Как видите ng сам создал необходимые файлы и прписал назввания класса в декларациях. Ошибок в консоли нет. Но при этом не вызывается компонент, что только я не пробовал. Знаю, что скорее всего решение очевидно, но я в силу малого опыта не могу его найти.

Answer 1

Во первых, у вас не AngularJS 1.6. У вас Angular 2 или выше.

Во вторых, вы используете неверный селектор. При создании компонента вы указали селектор mc-dates.

import { Component } from '@angular/core';
@Component({
  selector: 'mc-dates',
  templateUrl: './mc-dates.component.html',
  styleUrls: ['./mc-dates.component.css']
})
export class McDatesComponent {
  message = 'it works';
}

При использовании указываете селектор app-mc-dates.

<!doctype html>
<html lang="en" ng-app="">
<head>
  <meta charset="utf-8">
  <title>Mcdates</title>
  <base href="/">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
1 + 2 = {{ 1+2 }}
<app-root>Loading...</app-root> <!-- вызывается -->
<app-mc-dates>Loading...</app-mc-dates> <!-- не вызывается -->
</body>
</html>

Используйте одинаковые селекторы app-mc-dates или mc-dates.

Согласно styleguide лучше использовать app-mc-dates.