小编Edr*_*ric的帖子

我正在尝试扩展其中一个Material组件MdTabGroup.使用开箱即用的MdTabGroup组件一切正常 - 材料库正确导入模块等.

这是扩展组件:

@Component({
    selector: 'md-custom-tab-group',
    templateUrl: 'custom-tab-group.html',
    ....
})
export class MdCustomTabGroup extends MdTabGroup {
  constructor( private _r : Renderer) {
    super(_r);
  }
}

新组件在app模块中导入并声明,因此创建:

<md-custom-tab-group>
    <md-tab>one</md-tab>
    <md-tab>two</md-tab>
</md-custom-tab-group>

自定义选项卡组(custom-tab-group.html)的模板与材质中的模板相同,例如

<div class="mat-tab-body-wrapper" #tabBodyWrapper>
    <md-tab-body role="tabpanel"
                 *ngFor="let tab of _tabs; let i = index"
                 ...
                 [content]="tab.content"
                 ...>
    </md-tab-body>
</div>

运行时,_tabsViewChildren集合将正确填充 - 它包含md-tab原始标记中的声明,解释为"材质"选项卡组件.但是,custom-tab-group.html模板是不是有效.模板解析器现在不知道'md-tab-body'是什么.

具体 -

无法绑定到'content',因为它不是'md-tab-body'的已知属性.

但是当我拿起新模板时,我认为它根本不知道md-tab-body是什么.

问题是 - 如何纠正此行为并使扩展组件正常工作？

我尝试使用该track元素，但没有用。.能否请您告诉我是否做错了什么？

<video controls="controls" id="video1" width="450">
    <source src="A taste of TED.mp4" type="video/mp4">
    <track src="TED.vtt" kind="subtitles" srclang="en" label="English">
 </video>

字幕文件（TED.vtt）如下所示：

WEBVTT

1
00:00:01.000 --> 00:00:10.000
This is the first line of text, displaying from 1-10 seconds

2
00:00:15.000 --> 00:00:20.000
And the second line of text
separated over two lines

当按下“立即进入”按钮时，我试图将我的视图移出屏幕：

export class Onboarding extends Component {

  constructor(props) {
    super(props);
    this.state = {
      offsetX: new Animated.Value(0),
    }
  }

  hideOnboarding() {
    console.log("hiding"); // <-------- prints out when button pressed
    Animated.timing(
      this.state.offsetX,
      { toValue: new Animated.Value(-100) }
    ).start();
  }

  render() {
    return (
      <Animated.View style={{ transform: [{translateX: this.state.offsetX}] }}>
        ...
        <TouchableOpacity onPress={ () => { this.hideOnboarding() } }>
          <View style={styles.enterButton}>
            <Text style={styles.buttonText}>Enter Now</Text>
          </View>
        </TouchableOpacity>
      </Animated.View>
    );

但是当我点击我的按钮时没有任何动静。我的控制台语句虽然有效。有谁知道我做错了什么？

所以我正在尝试使用MdDialog来显示错误消息.不幸的是,它似乎不是一个弹出窗口,而是作为页面底部的一个块.

我需要查看或更改以使其正常工作？

代码如下

共modal.component.html

<h2 md-dialog-title>{{ title }}</h2>
<md-dialog-content>
    <p>{{ message }}</p>
</md-dialog-content>
<md-dialog-actions align="right">
    <button md-raised-button md-dialog-close>{{ closeText }}</button>
    <button md-raised-button *ngIf="enableNext" id="sm-next-button"
            (click)="dialogRef.close(true)">{{ nextText }}</button>
</md-dialog-actions>

共modal.component.ts

import { Component }   from '@angular/core';
import { MdDialogRef } from "@angular/material";

@Component({
    selector: 'common-modal',
    templateUrl: 'common-modal.component.html',
    styleUrls: [ '../modal.component.scss']
})
export class CommonModalComponent {
    /**
     * The text for the header or title of the dialog.
     */
    title: string;
    /**
     * The text for the body or content of the …

在第一次进入我的 /home 路线时，我的导航按钮没有获得材质样式，.mat-button 的长样式链，包括 min-width: 88px （我发现这是一个非常好的搜索键）。该样式包含在 vendor.bundle 中。它接收许多其他样式，例如 flex-layout 等。

当我从 Chrome 控制台查看它时，样式表未列在元素的适用样式中。当我查看DOM（在elements->head下）时，vendor.bundle.js表没有列在加载的样式中！当我导航到 /login 并停留在那里时，它会被加载。比较 home.module 和 login.module 后，我在后者中找不到任何导入，但在前者中找不到（除了路由模块和两个模块的私有组件）。

奇怪的是：这只发生在初始进入的 /home 路由上。所有其他路由（例如 /login - /home 和 /login 都没有路由保护）可以看到材质样式（带有最小宽度为 88px 的更宽按钮等）。更好奇的是，如果我导航到任何路线并返回/home，则材料样式会重新出现。它们没有出现的唯一情况是当我输入 /home 到浏览器 URL 框时。

请注意，导航按钮是我的 app.conponent（home.component 的父级）的一部分。我不知道为什么初始导航到 /home 会改变 app.component 的样式。

网络跟踪显示，在加载 /home 后，当我切换到 /login 并返回到 /home 时没有加载任何其他内容。

config:
@angular/cli: 1.4.4
@angular/core: 4.4.4
@angular/material: 2.0.0-beta.11

我说的88px在很多地方都可以找到，包括material/bundle/material.umd.js line 3744

MdButton.decorators = [...

关于如何调试这个有什么建议吗？这真让我抓狂。

Angular Material小吃栏中可以有多个动作吗？

我知道可以为小吃店使用您自己的组件。

但是对于此代码，该动作只是一个动作

private snackBar: MatSnackBar;


this.snackBar._openedSnackBarRef.onAction().subscribe(
  () => {
    console.log('action has occurd, but wich one?')
  }
);

我在工具栏中有一个标准的 Angular Material Menu...

    <button mat-icon-button #videoMenu #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="vidmenu" matTooltip="Watch videos" class="toolbar-btn"
(click)="onShowVid()">
    <mat-icon [style.color]=vidIconColor [style.background-color]=vidIconBackcolor>local_movies</mat-icon>
</button>
&emsp;
<mat-menu #vidmenu="matMenu">
    <button mat-menu-item>
        <img src="assets/images/vid_welcome.jpg" height=40px/>
        <span> Welcome</span>
    </button>
    <button mat-menu-item>
            <img src="assets/images/vid_video1.jpg" height=40px/>
            <span>Video 1</span>
        </button>
    <button mat-menu-item>
        <img src="assets/images/vid_video2.jpg" height=40px/>
        <span>Video 2</span>
    </button>
</mat-menu> 

在测试中，无论我们制作多大的材质菜单图标，用户都看不到它。一位用户建议我们在打开菜单的情况下开始体验……这样他们就可以看到选项，点击一个，然后菜单关闭。然后他们就会知道它在那里供将来使用。

我已经研究过在 ngOnInit() 期间远程触发 click() 以打开它，但所有示例都是旧的 angular 版本，即使我让它工作，我猜它也会有问题。

有没有办法简单地将菜单设置为“打开”的默认状态，然后从那里正常运行？

我正在尝试添加角形材质组件。但该组件无法正常工作。该错误说

Uncaught Error: Template parse errors: 'mat-option' is not a known element:
// ...

我认为错误来自app.module.ts：

Uncaught Error: Template parse errors: 'mat-option' is not a known element:
// ...

我正在尝试分享一些文字，在 Android 10 中总是在我的手机中显示最多 3 个应用程序有 WhatsApp 但这里没有显示

此代码在 10 台以下设备中正常工作，但找不到在 android 10 中被过滤掉的原因。

fun onShareClick() {
        val intentShareList = ArrayList<Intent>()
        val shareIntent = Intent()
        shareIntent.action = Intent.ACTION_SEND
        shareIntent.type = "text/plain"
        val resolveInfoList = packageManager.queryIntentActivities(shareIntent, 0)
        for (resInfo in resolveInfoList) {
            val packageName = resInfo.activityInfo.packageName
            val name = resInfo.activityInfo.name
            if (packageName.contains("com.facebook") ||
                packageName.contains("com.twitter.android") ||
                packageName.contains("com.google.android.gm") ||
                packageName.contains("com.android.mms") ||
                packageName.contains("com.whatsapp")
            ) {
                val intent = Intent()
                intent.component = ComponentName(packageName, name)
                intent.action = Intent.ACTION_SEND
                intent.type = "text/plain"
                intent.putExtra(Intent.EXTRA_SUBJECT, "Your …

Material.io 有一个很棒的工具，称为材质调色板生成器：https://material.io/design/color/#tools-for-picking-colors。使用它，您可以选择主要颜色和次要颜色，然后单击链接“在颜色工具中查看”，该链接会将您带到一个页面，您可以在其中以不同方式查看您的选择：https ://material.io/resources/color /#!/?view.left=0&view.right=0&primary.color=6002ee&secondary.color=c63131。

但似乎没有一种简单的方法可以将调色板导出为可用于生成自定义 Angular Material 主题的格式。他们有一个导出链接，但最接近的格式似乎是 CodePen。但是一旦你在CodePen中打开它，CSS似乎没有你需要的调色板信息。

我的问题：有人尝试过这些工具吗？是否有从 Material 调色板到 Angular Material 自定义主题的预先建立的途径？或者说他们没有关系？如果不相关，是否有一种简单的方法将前者所需的颜色代码复制到后者？

谢谢。