标签: angular

创建使用自定义表单元素时，ngModel必须提供一个元素NG_VALUE_ACCESSOR，这又需要组件实现ControlValueAccessor，该元素具有一种称为的方法registerOnTouched。所有angular.io文档都说的是：

registerOnTouched(fn: any) : void

Run Code Online (Sandbox Code Playgroud)

设置控件收到触摸事件时要调用的函数。

Angular文档听起来像是用于触摸输入，但是我认为这是ngForm查看用户是否曾经与输入进行交互的方式的一部分。文档似乎缺少一些有关“触摸事件”以及应该如何从组件外部注册和使用“ onTouch”处理程序的信息。

这到底是为了什么？如何使用？谁提供的fn？...使用我的组件（(touched)="handler()"）或仅使用Angular本身的开发人员？我看过一些示例，它们只是注册一个处理程序，然后从不调用或忽略它。如果是这样，为什么我需要完全实现它？

“触摸事件”的端到端示例可能会清除所有这些。

我需要在angular 4 app中实现全局错误处理.它是ErrorHandler一种机制,适用于某些情况,但并非适用于所有情况.例如:当我们遇到一些严重错误时,比如丢失模板或其他东西,请ErrorHandler忽略它.当我使用错误的网址模板时,我得到Zone.js错误:

@Injectable()
export class CommonErrorHandler implements ErrorHandler {
    constructor(private injector: Injector) {
    }


    public handleError(error: any): void {
        console.log("error", error);
    }
}

Zone.js不会抛出异常,它只是控制台错误,所以window.onerror也不起作用.

错误处理程序

 providers: [
        AuthGuard,
        { provide: ErrorHandler, useClass: CommonErrorHandler }
}

在app.module中注册:

@Injectable()
export class CommonErrorHandler implements ErrorHandler {
    constructor(private injector: Injector) {
    }


    public handleError(error: any): void {
        console.log("error", error);
    }
}

UPD plnkr示例添加:

例

我在使用该软件包在应用程序中进行开发时正在开发一个Angular/TypeScript组件包.我使用npm链接来设置共享组件.在构建时,似乎tslint为链接包启动了一堆警告.

例如,在我们的tslint.json中,我们有一个前缀" ta".在包中它是" fn".因为我们在tsconfig中排除了node_modules,所以我们从未遇到过问题.但是一旦我们npm链接了包,它现在也在我们的包中打印文件.然后,它会在构建时在控制台中触发一堆警告.

WARNING in ../fn-library/src/popover/popover.component.ts
[10, 15]: The selector of the component "PopoverComponent" should have prefix "ta"

有关从npm链接包中抑制tslint警告的任何建议吗？

这是我在父项目中的当前tsconfig.json文件:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "noEmit": true,
        "noEmitHelpers": true,
        "strictNullChecks": false,
        "importHelpers": true,
        "baseUrl": "./src",
        "paths": [],
        "lib": [
            "dom",
            "es6"
        ],
        "typeRoots": [
            "node_modules/@types"
        ],
        "types": [
            "jasmine",
            "node"
        ]
    },
    "exclude": [
        "node_modules/**/*",
        "dist/**/*"
    ],
    "angularCompilerOptions": {
        "skipMetadataEmit": true
    },
    "compileOnSave": false,
    "buildOnSave": …

假设我有这样的模态模板:

<div class="modal-header">
  <h3 [innerHtml]="header"></h3>
</div>

<div class="modal-body">
  <ng-content></ng-content>
</div>

<div class="modal-footer">
</div>

我从另一个组件调用这个模态,所以:

    const modalRef = this.modalService.open(MobileDropdownModalComponent, {
      keyboard: false,
      backdrop: 'static'
    });

    modalRef.componentInstance.header = this.text;

我怎么能用NgbModal绑定等放入html？成ng-content

编程时可重用性非常重要,我们可以采取的任何措施来减少代码重复,这将有助于我们解决问题.

我必须使用Modal弹出窗口向Angular 2项目中的许多地方的用户显示信息.我正在使用ng-bootstrap,并且所有这些Modals都具有相同的页眉和页脚,但在许多情况下更改了正文.有时候身体只是想要替换一个占位符,有时候它有一些复杂性来准备动态内容.这些由不同的组件触发或管理.

ng-bootstrap允许我们以两种方式将内容传递给Modal.

1. 作为模板.这里包含整个Modal html<ng-template></ng-template>
2. 作为一个组件

使用第一种方法,我必须每个模态重复写标题,正文和页脚.

使用第二种方法,我可以将HTML包装在组件中,但需要放置占位符以使其动态化.所以我可以按如下方式传递值

  open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
  } 

但灵活性仍然有限.

我想要实现的是使用内容投影[Transclusion]重新构建模态组件

所以,在我的Common Modal的主体中看起来如下.我把它<ng-content></ng-content>作为Modal身体的一个插槽.

  @Component({
  selector: 'common-modal',
  template: `
  <!-- Modal -->
  <div class="modal fade" id="common-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">{{title}}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <ng-content></ng-content>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div> …

我订阅了路由器事件angular2,当我控制事件时,我发现了一个NavigationCancel事件reason: "".很想知道NavigationCancel触发的原因是什么.不仅empty有理由,而且一般.

谁能告诉我IE11为什么在最后一行抛出错误-

this.document = this.control.value;
  const bytes = 
this.documentService.base64toBytes(this.document.documentBlob.documentData, 
       this.document.documentDataFormat);
const file = new File(bytes, this.document.documentName, { type: 
       this.document.documentDataFormat });

这在Chrome和Firefox中都可以使用。IE抛出对象错误-

Object doesn't support this action.

我将所请求的Url保存在localstorage中,重定向到身份服务器,这个重定向回我的根URL,然后我想导航到之前保存的URL.

我在守卫中保存网址:

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> {

    const hasAccessToken$ = Observable.of(this.oAuthService.hasValidAccessToken());

    const setRedirect$ = hasAccessToken$
      .filter(isAllowed => !isAllowed)
      .do(() => localStorage.setItem('login.redirect', state.url)) // save requested url for later redirect
      .do(() => this.oAuthService.initImplicitFlow());

    setRedirect$.subscribe();
    return hasAccessToken$;
  }

我正在尝试在我的app.component.ts中重定向:

ngOnInit() {
    this.oAuthService.tryLogin({ onTokenReceived: () => this.redirect() }); // try to parse token from url
  }

private redirect() {
    const url = localStorage.getItem('login.redirect');
    console.log(url);
    this.router.navigateByUrl(url);
  }

我的路由看起来像这样:

const routes: Routes = [
    {
        path: 'files',
        loadChildren: './folder-page/folder-page.module#FolderPageModule',
        canActivate: [AuthGuard]
    },
    { …

我可以在index.html中动态设置标签,角度为4的元概念.但是当我尝试删除标签时,没有删除,我怎样才能删除之前添加的标签？

这是我尝试过的:设置标签:

import {Meta ,MetaDefinition } from '@angular/platform-browser';
@Component({
  selector: 'app-share-video',
  templateUrl: './share-video.component.html',
  })
export class ShareVideoComponent implements OnInit {
constructor(public metaServic:Meta){}
ngOnInit(){
    const ogtitle: MetaDefinition   =  { name: 'og:title', content: 'Grace' };
    const ogSitename: MetaDefinition = { name: 'og:site_name', content: 'My Favourite Albums'};
    const ogUrl: MetaDefinition = { name: 'og:url', content: 'https://angular.io/docs/ts/latest/api/platform-browser/index/Meta-class.html'};
    const ogdesc: MetaDefinition = { name: 'og:description', content: 'angular 4 share video description'};
    this.metaService.addTag(ogtitle);
    this.metaService.addTag(ogSitename);
    this.metaService.addTag(ogUrl);
    this.metaService.addTag(ogdesc);
  }        
ngOnDestroy() {
   this.metaService.removeTag("property='og:title'");
   this.metaService.removeTag("property='og:site_name'");
   this.metaService.removeTag("property='og:url'");
   this.metaService.removeTag("property='og:description'");
    } …

我有一个由Express提供的简单的Angular 4项目.当我尝试使用Googlebot抓取我的网站时,它只显示了一个空白页面(AppRoot的innerHTML).我以为谷歌声称它的机器人支持Angular 4/JS网站？

如果这仍然是问题,使用Angular Universal的服务器端渲染真的是最好的解决方案吗？就像我必须设置另一台服务器端服务器,除了服务于普通客户端呈现应用程序的主服务器之外,还提供服务器端渲染应用程序？如果是的话,我如何告诉googlebot转到服务器端呈现的应用程序的端口和普通的http流量转到客户端呈现的应用程序的端口？抓取器不是http流量吗？