Технически приложение / компонент уже загружен, вы только скрываете его ... поэтому вы не загружаете компонент нажатием кнопки, а только позволяете просмотреть его нажатием кнопки.
Если вы реализуете OnInit в своем классе и ведете консольный журнал, вы увидите, что компонент был инициализирован еще до того, как вы нажмете кнопку.
export class AppComponent implements OnInit
ngOnInit(){
console.log('AppComponent Initialized');
}
Затем, если вы добавитеconsole.log(document.activeElement); в вашем методе show в index.html вы увидите, что ваша кнопка на самом деле все еще имеет фокус после нажатия;По этой причине ваш компонент не получает фокус и, в конечном итоге, чернильная полоса не отображается ...
Элемент вне вашего компонента имеет фокус на index.htmlуровень и из-за того, как вы экспонируете вид вашего компонента не угловым образом, он воздействует на компонент.
function show()
{
document.getElementById("foo").style.display = "block";
console.log(document.activeElement);
}
Результат приводит к следующему выводу через консоль, когда кнопкащелчок показывает, что кнопка имеет фокус.
<input type="button" value="Click" onclick="show()">
Поскольку ваш компонент уже был инициализирован в фоновом режиме, вам не хватает возможности использовать ловушки жизненного цикла, чтобы решить эту проблему ... потому что ониВы уже вызваны в фоновом режиме, у вас нет возможности программно установить фокус внутри вашего компонента, когда нажимается кнопка в index.html ... или, по крайней мере, способ, который я бы порекомендовал.
За комментарийисследовать поиск истинного углового способа сделать это, который использует структуру должным образом, это не способпродолжай делать это ... это также не делает то, что ты думаешь.