Angular: установка свойства компонента вне компонента
У меня есть страница Angular, которая использует компонент для отображения некоторых своих свойств. Но свойства компонента не отображаются на странице. Вот код:
HTML-страница (testPage.component.html)
<p>title: {{title}}</p>
<p>another title: {{anotherTitle}}</p>
TypeScript (testPage.component.ts)
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-testPage',
templateUrl: './testPage.component.html',
styleUrls: ['./testPage.component.css']
})
export class TestPageComponent implements OnInit {
title: string;
anotherTitle = "This is another title";
setTitle(): void {
this.title = "This is title!!";
console.info('This is title', this.title);
}
}
var testPageComponent = new TestPageComponent();
//newBudgetComponent.title = "some title here!!"; //Also not working
testPageComponent.setTitle();
На странице anotherTitle заполняется нормально, но title не заполняется.
Функция setTitle регистрирует заголовок, но страница Angular не отображает значение.
Вот как выглядит страница:
Как установить свойство компонента вне компонента?
Поделитесь, пожалуйста, вариантом использования. Вероятно, есть несколько способов сделать это, но, в конце концов, почему вы пытаетесь установить значение вне приложения?
Ответы 2
Вы пытаетесь установить заголовок страницы? если да, то воспользуйтесь услугой Title
import { Title } from '@angular/platform-browser';
constructor(private titleService: Title)
this.titleService.setTitle("Title");
В противном случае используйте общую службу с субъектом поведения, если это не дочерний компонент, затем используйте Input
Есть несколько способов добиться этого. Во-первых, взаимодействие компонентов в Angular и то, как они отображаются на странице, немного менее прямолинейно, чем в примере, который вы пытаетесь показать. Пожалуйста, обратитесь к эта ссылка, чтобы узнать больше о жизненном цикле компонента в Angular.
Что касается установки значений свойств компонента, вот несколько примеров. Имейте в виду, что некоторые из них могут нуждаться в настройке, поскольку я не писал это в среде IDE / не запускал код.
Ваш пример уже делает это. Когда компонент создается, значение этого поля по умолчанию уже установлено. title = 'My Title'
Украшение вашей собственности с помощью @Input() позволяет передавать данные из родительского компонента в дочерний компонент. <my-child-component [title]='value-or-variable'></my-child-component>
Украшение свойства «компонента» (в данном случае дочернего компонента в родительском) с помощью декоратора @ViewChild() позволит родительскому компоненту иметь доступ к дочернему компоненту и работать с его свойствами. Имейте в виду, что указанный компонент должен быть дочерним по отношению к родительскому компоненту. @ViewChild(MyChildComponent) child: MyChildComponent;, затем после завершения цикла инициализации родительского компонента this.child.title = 'My Title';
Декорирование свойства «компонента» (в данном случае дочернего компонента в родительском или в любых потомках) декоратором @ContentChild() позволит родительскому компоненту иметь доступ к дочерним компонентам и работать с их потомками и свойствами. Имейте в виду, что указанный компонент может быть любым дочерним компонентом этого родителя. @ContentChild(MyDescendentComponent) descendent: MyDescendentComponent;, затем после завершения циклов инициализации this.descendent.title = 'My Title';
Предоставленные объекты могут быть введены в компонент и в идеале заданы значения для компонента в методе ngOnInit. Поставщик может быть установлен на нескольких разных уровнях, включая (но не ограничиваясь) компонентные модули. Эта ссылка гораздо более подробно описывает внедрение зависимостей, хотя он немного старше.
class MyComponent {
constructor(myService: MyService) {}
}
//module
providers: [
MyTitleToken,
],
//component
class MyComponent {
constructor(public title: MyTitleToken) {}
}
//module
providers: [
{provide: 'MyTitle', useValue: 'Hello Title'},
],
//component
class MyComponent {
constructor(@Inject('MyTitle') title: string) {}
}
чего именно вы здесь пытаетесь достичь?