小编Hen*_*ava的帖子

I am working on a Next.js multisite scoped project and I need to create a set of global variables to use on client and server (during SSR) side.

So far I came to the below solution.

This is how my custom App looks like:

import App from 'next/app'
import multisite from '@utils/multisite';
import MultisiteProvider from '@components/multisite/MultisiteProvider';

function MyApp({
  Component,
  site,
  pageProps
}) {
  // Will add site props to every page
  const props = { ...pageProps, site };
  return ( …

我正在使用纯MDL和Angular2进行项目,但我遇到了textfields和ngModel的问题.

当角度组件为模型中使用的对象设置一些值时,MDL组件不会正确运行脏和有效性检查,我认为这是因为它不需要触发所需的事件.

这是输入代码:

<div class="mdl-textfield mdl-js-textfield">
    <input type="text" required class="mdl-textfield__input" id="field-sample" name="field-sample" [(ngModel)]="obj.name"></input>
    <label class="mdl-textfield__label" for="field-sample">Placeholder label</label>
</div>

这是创建组件后的结果:

请注意,输入有一个值(由角度组件提供),但占位符标签仍然在输入上,输入为红色,表示这是无效的.

经过一些研究,我开发了一个指令解决方案:

import {AfterViewChecked, AfterViewInit, Directive, ElementRef} from '@angular/core';
declare var componentHandler: any;

/**
 * Created to make MDL field validation and dirt check compatible with angular
 * Used in <input> and <textarea> tags
 */
@Directive({
    selector: '[mdl-textfield]'
})
export class MDLTextFieldDirective implements AfterViewChecked, AfterViewInit {

    constructor(private element: ElementRef) {
    }

    ngAfterViewInit() {
        componentHandler.upgradeAllRegistered();
    }

    ngAfterViewChecked() {
        let mdlField = this.element.nativeElement.MaterialTextfield; …