Угловой 2, который подходит для показа показаний погрузки?

Question

У меня есть компонент таблицы:

@Component({ 
    moduleId: module.id, 
    selector: 'ag-table', 
    template: ` 
     <span *ngIf="isLoading">Loading</span> 
     <table class="table"> 
      rows loaded through @Input() rows; 
     </table> 
    ` 
}) 

Тогда у меня есть родительский компонент:

@Component({ 
    moduleId: module.id, 
    selector: 'ag-page', 
    template: ` 
     <ag-table [rows]=rows></ag-table> 
    ` 
}) 

Теперь, в AG-странице, мне нужно, чтобы получить данные с сервера, так что я делаю http-запрос через службу, скажем, page.service.ts. В этот момент я хочу показать показание загрузки в своем аг-таблице.

Каков наилучший подход?

1. Получить экземпляр компонента через ag-страницу с помощью @ViewChild и установить isLoading в true?

2. Создайте table.service.ts, добавьте его в TableComponent и используйте наблюдаемые для обнаружения при загрузке данных.

3. Другое предложение?

Answer 1

Вы можете проверить, установлен ли вход rows.

@Component({ 
    moduleId: module.id, 
    selector: 'ag-table', 
    template: ` 
     <span *ngIf="!rows">Loading</span> 
     <table class="table"> 
      rows loaded through @Input() rows; 
     </table> 
    ` 
}) 
export class AgTable { 
    @Input() 
    rows:Row[]; 
} 

Когда запуск приложения, ag-page не имеют ни одной строки, так что переменная rows передается ag-table неопределен. Таким образом, тест !rows возвращает true и отображается ваш диапазон загрузки.

В конце асинхронной нагрузки ag-page переопределяет свои строки новым значением. При привязке ввода строки задаются ag-table. Таким образом, тест !rows теперь является ложным, а диапазон загрузки удаляется.