Простой компонент Angular не отображается
Поэтому я следую простому руководству YouTube для начинающих по Angular. В начале этого учебника объясняется, как использовать компоненты, и я все понимаю, и это имеет смысл, но независимо от того, что я делаю, компонент не отображается. Код выглядит следующим образом:
App.component.html:
<app-header></app-header>
App.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
@NgModule({
declarations: [
AppComponent,
HeaderComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Header.component.html:
<header> Test </header>
И header.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
}
Я понятия не имею, почему, но компонент заголовка не отображается, если я загружаю app.component.html. Если я пишу обычный код в app.component.html, он появляется, но с этим кодом я просто получаю пустую сторону. Тоже нет ошибки.
Также ни у кого нет проблем с этим в комментариях, поэтому я думаю, что сделал ошибку, но где?
Прошу прощения за мой английский, я не носитель языка и заранее благодарю вас за вашу помощь.
@akseli Извините, это мой первый вопрос, я обновил его со всеми подробностями, которые вы просите.
См. «селектор» компонента, если вы используете в качестве селектора app-header, вам нужно написать <app-header></app-header>. Кстати, вы также можете проверить официальное руководство: тур по героям и пример приложения
@Eliseo, ты имеешь в виду селектор в header.component.ts? Потому что это app-header, и я также написал <app-header></app-header> в app.component.html, что вы хотите, чтобы я изменил?
@Palaeonton, посмотрите на свой компонент, он выглядит так @Component{selector:'app-header',...} Да, «селектор» — это строка, которую вы указываете, когда вы пишете app-header, чтобы показать, что компонент нужно использовать <app-header></app-header> в .html вашего AppComponent
@Eliseo Я только что попытался изменить селектор на что-то, а затем я также изменил часть <app-header></app-header> в своем коде на то же самое. Например, я изменил селектор на anything, а затем написал в app.component.html <anything></anything>, он также был автоматически завершен VSCode, но все равно не работал.
@Palaeonton, извините, забудьте мои комментарии, я неправильно прочитал ваш вопрос :( -извинения-). Ваш код выглядит нормально. Попробуйте «переинициализировать» сервер (перезапустите сервер ng)
@Eliseo, все в порядке, спасибо за помощь. Не могли бы вы объяснить подробнее, как я могу повторно запустить сервер ng? Я действительно новичок в этом виде программирования.
Ответы 1
Я только что нашел решение своей проблемы: Мне нужно было открыть мой файл в моем терминале через
ng serve --open
В Терминале. До этого я пытался открыть файл через проводник, который никогда не работал. Как я уже сказал, я действительно новичок в этом виде программирования, и я понятия не имею, почему это работает только таким образом. Так что, если кто-то может объяснить это мне, я был бы очень благодарен.
Вы получаете ошибки при создании/обслуживании сайта? Вы получаете пустую страницу? Если вы измените app.component.html и добавите туда контент, вы что-нибудь получите? Вам нужно добавить дополнительную информацию, чтобы помочь нам помочь вам!