相关疑难解决方法(0)

使用Angular 2.0的Angular 2.0 Material MdDialog的工作示例

我正在开发一个POC应用程序,我正在努力让MdDialog组件正常运行.有没有人有一个传递给MdDialogopen方法的工作示例?

Angular 2.0:https: //github.com/angular/angular

Angular 2材料:https: //github.com/angular/material2

material-design angular-material angular

33
推荐指数
1
解决办法
3万
查看次数

如何动态添加指令?

如何动态添加(注入)指令到主机?

我有一个myTooltip指令,我想将mdTooltip指令添加到它的主机.我试过setAttribute()ElementRef.nativeElement,但它没有创建mdTooltip指令.

mytooltip.directive.ts:

@Directive({
  selector: '[my-tooltip]',
  host: {
    '(mouseenter)': 'show()',
    '(mouseleave)': 'hide()',
  }
})
export class myTooltip {
  @Input('my-tooltip') message;

  constructor() { }

  show() {
    /* TODO: How to add md-tooltip directive to elementref (host)? */
  }

  hide() {
    /* TODO: remove md-tooltip directive from elementref (host) */
  }
}
Run Code Online (Sandbox Code Playgroud)

通过主机我的意思是具有myTooltip指令的元素:

<span my-tooltip="tooltip hint">Click here</span>
Run Code Online (Sandbox Code Playgroud)

结果不会在html之上改变,但是在mouseenter上它会有span中的md-tooltip指令.

顺便说一句,我使用包装器而不是直接使用md-tooltip的原因是我想稍后修改显示延迟,隐藏延迟并以其他方式定制材料工具提示的行为.

编辑显然目前不支持动态添加指令:(我认为这个问题仍应存在,以防材料团队更新

typescript angular2-directives angular

26
推荐指数
1
解决办法
2万
查看次数

在另一个指令的主机中使用指令

我想通过使用host属性从另一个指令向一个元素添加一个指令,但是似乎没有办法引用另一个指令.

@Directive({
    selector: '[one]',
    host: { '[two]': '"some-value"' }
    // How can I reference DirectiveTwo here?
})
export class DirectiveOne { }

@Directive({
    selector: '[two]'
})
export class DirectiveTwo { }
Run Code Online (Sandbox Code Playgroud)

执行此操作时,我得到标准"无法绑定到'两个',因为它不是已知的本机属性"错误.

引用和使用另一个指令的正确方法是什么?

angular2-directives angular

11
推荐指数
2
解决办法
4778
查看次数

防止 MatDialog 被拖出窗口

我目前正在从事一个 Angular 项目。我将Angular 材料中的MatDialog拖放的 Angular 模块一起使用。我想防止对话框被拖到屏幕窗口之外。有谁知道如何做到这一点?

提前致谢。

drag-and-drop angular-material angular

4
推荐指数
1
解决办法
1246
查看次数