Наследование компонентов из шаблонов

Question

Мотивация

Существует бесчисленное количество сценариев ios, в которых мы хотели бы, чтобы несколько компонентов имели одинаковые функции. Очевидно, мы не хотим (и не должны !!) просто копировать дочерние компоненты. Это то, для чего подходит концепция объектно-ориентированного программирования, называемая наследованием.

Например, в моем случае мы хотим иметь этот <loader> на всех страницах / производных компонентах, которые могут загружаться. Мы бы сделали что-то вроде создания BaseComponent с этим <loader> в своем шаблоне, с методами для его отображения и скрытия (например, showLoader(), hideLoader()).

Как сделать реализовать в другом фреймворке / библиотеке

Исходя из фона React + MobX, я бы сделал что-то вроде следующего:

BaseView.js:

@observer
export class BaseView extends Component { 

    

    constructor(props) { 
        super(props);
        
        // NOTE: this could be stored in the view model MobX store being passed in as prop, too...
        this.state = {
            isLoading: false,
        }
    }
    
    showLoader() {
        // NOTE: we could just change it on the view model, too...
        this.setState({
            ...this.state,
            isLoading: true,
        })
    }
    
    hideLoader() {
        // NOTE: we could just change it on the view model, too...
        this.setState({
            ...this.state,
            isLoading: false,
        })
    }
    
    renderContent() { 
        // to be implemented by derived component
    }
    
    render() { 
        return <Fragment>
        {
            // note: we could also mount/unmount the component, preventing having to React to a prop/state change as well
            (this.state.isLoading) && 
                React.createPortal(<Loader />, 
                    document.querySelector('#loader-container')
                )
                
        }
        {
            this.renderContent()
        }
        </Fragment>
    }
}

DerivedView.js будет просто:

@observer
export default DerivedView extends BaseView { 
    renderContent() { 
        return <Fragment>
            <code style={{whiteSpace: pre}}>
                Your content go in here and replace this code tag
            </code>
        </Fragment>
    }
}

Проблема

Возвращаясь к Angular, через два года я не могу думать о том, как go делать в нем что-то подобное.

Я знаю, что есть теги template и templateUrl, когда вы хотите определить шаблон в том же файле, что и контроллер, или обратитесь к файлу HTML, чтобы разделить проблемы, соответственно. Я знаю, что оба они определены в функции декоратора классов @Component.

templateUrl относятся к HTML файлу, который не имеет понятия наследования. Я также не хочу смешивать проблемы с представлением и контроллером / моделью представления, потому что это было бы фигней.

template позволяют нам определять контент как строку ES6, которая будет склоняться к тому, что я хочу, но мы рискуем смешать представление и проблему контроллера / модели представления.

Как выполнить sh шаблон проектирования наследования в Angular, не смешивая проблемы и не взламывая в основном?

Answer 1

Необязательно, чтобы вы хотели сосредоточиться на template или templateUrl.

Все, что вам нужно сделать, это создать компонент с selector и использовать его в других ваших компонентах шаблоны (файлы HTML).

Настройка псевдокода для вашего компонента загрузчика

// loader.component.ts
@Component({
  selector: 'loader',
  templateUrl: './loader.html'
})
export class LoaderComponent {
// class level things here like inputs, lifecycle hooks, dependency injection, etc.
// this is where you could determine what to hide and show in the template.
}

<!-- loader.component.html -->
loader works!

И затем в ваших базовых компонентах. html

<!-- base.component.html -->
base works!
<loader></loader>