小编Sun*_*arg的帖子

我有一个项目，其中我同时使用angular-material的和materialize-css的侧面导航。Angular Material的侧面导航在左侧面板中始终处于打开状态。对于materialize-css的side-nav，有一个按钮可以在左侧打开它。

对于角材料，计算属性为

z-index:2;
position:absolute

对于materialize-css，计算属性为

z-index:999;
position:fixed

我读过

z-index仅适用于定位的元素（position：absolute，position：relative或position：fixed）。

因此，两个侧导航都设置了position属性。但是，角材料的side-nav优先于并且显示在materialize-css side-nav之上。我不知道这怎么可能，其背后的原因是什么？

如果我设置z-index:1角度材质，则它位于materialize-css后面，但是将z-indexmaterialize-css 更改为999999999不起作用。

更新

我已经在本网站上阅读了此书，但仍然无法理解

每个堆叠上下文都有一个HTML元素作为其根元素。当在元素上形成新的堆叠上下文时，该堆叠上下文会将其所有子元素限制在堆叠顺序中的特定位置。这意味着，如果元素位于堆叠顺序底部的堆叠上下文中，则无法使它出现在堆叠顺序较高的不同堆叠上下文中的另一个元素的前面，即使使用Z指数十亿！

实际上z-index不适用于materialize-css的sidenav。由于sidenav本身添加了一个元素z-index:997

<div class="sidenav-overlay" style="display: block; opacity: 1;"></div>

和CSS

.sidenav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    height: 120vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 997;
    display: none;
}

因此屏幕上会出现一个叠加层。即使z-index为999，我也无法对side-nav执行任何操作。所以问题出在sidenav的z索引上。

我无法发布整个代码，因为单独的sidenav可以工作，但这是dom层次结构

body
 > app-root (Angular Componet) 
    > mat-sidenav-container (Angular Material)
       > …

在 Angular 2+ 中，ngDoCheck和ngAfterViewChecked似乎执行相同的功能。 ngDoCheck据说只要触发更改检测就会调用。现在，此更改检测将随着视图中的更改而触发。根据文档，ngAfterViewChecked每当视图更改时都会调用。

当一个生命周期钩子就足够了时，这里还需要两个生命周期钩子吗？

我在GCE上有Windows服务器机器.每当我尝试将遥控器或RDP带入机器时它就会显示出来

远程会话已断开连接,因为没有可用于提供许可证的远程桌面许可证服务器.请联系服务器管理员

我重置了机器但没有工作.我在网上获得的解决方案首先需要访问机器,但我无法访问机器.这是一个链接http://www.dell.com/support/Article/us/en/04/635765/EN来解决这个问题,但由于该机器在谷歌服务器上,我无法访问机器.

我正在使用angular-cli构建一个小应用程序,我想使用PrismJS,但我无法使用它.

基本上我已经创建了一个供应商文件夹,我将Prism的脚本和样式放在index.html中.

我还需要安装类型定义才能编译我的应用程序:

npm i --save-dev @typings/prismjs

然后,我只需要Prism.whatever()在我的代码中的任何地方调用,但这不起作用.

甚至我的IDE也无法识别命名空间Prism.

通过检查定义的内容(index.d.ts)我已经看到,自1.6版以来,它不包含

declare var Prism : PrismJS.Prism;

了.只有一些export namespace Prism.所以我想知道是否必须导入一些东西,因为任何declare使用.

从定义文件中导入一些东西对我来说似乎很奇怪.

当我想要跨过这个时,我已经安装了包含的定义的旧版本(1.4.16)

declare var Prism : PrismJS.Prism;

现在,我的IDE(webstorm)很高兴!它可以识别Prism.但是当我尝试编译时,webpack仍会输出错误:

Cannot find name 'Prism'

所以我的问题非常基本:我忘记了什么？

抱歉这个显而易见的问题.

谢谢!

我正在使用 Grid List of angular material 2。

这是 plunker https://plnkr.co/edit/0v9R3e4x3tThh85147x7?p=preview

在这里，我定义了一个包含三列的网格列表，并且有三个图块（按定义为三列显示在一行中）。

我想改变拼贴的布局方向，比如如果屏幕尺寸在某个点缩小，那么所有拼贴都应该在另一列下方的第一列中，cols参数值以某种方式更改为 1。这怎么可能？flex-layout 可以吗？

我想动态呈现表格单元格。每个单元都是一个React组件。我试图将这些React组件导出为包装函数。

例如：

import cellA from './cellA'
import cellB from './cellB'
import cellC from './cellC'

let content = { cellA, cellB, cellC }

function tableize (a) {
    let resultFn = {}
    Object.keys(a).forEach((k) => {
        let element = a[k]
        resultFn[k] = function (data) {
            return (<element data={data} />)
        }
    })
    return resultFn
}

export default tableize(content)

问题在这条线上：

return (<element data={data} />)

结果是命名为element的React组件的浏览器渲染列表，而不是cellA，cellB，cellC。函数返回元素为jsx（在</>标记中），因为我需要将prop传递给这些React组件。但是我错了。

如何将props传递给包裹在变量中的这个React组件？

谢谢！

我已经创建了 nodejs 项目。这是package.json

{
  "name": "materializecssdemo",
  "version": "1.0.0",
  "description": "Use of material design components",
  "main": "index.js",
  "scripts": {
    "prestart": "node-sass ./scss/theme.scss ./css/materialize-theme.css",
    "start": "lite-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Sunil Kumar",
  "license": "ISC",
  "devDependencies": {
    "lite-server": "^2.3.0"
  },
  "dependencies": {
    "materialize-css": "^0.100.2",
    "node-sass": "^4.7.2"
  }
}

我只想将我的应用程序的颜色从默认颜色更改为蓝色。所以我创建了theme.scss文件并使用node-sass模块尝试生成 CSS 文件。这是我的theme.scss

$primary-color: color("blue", "lighten-2") !default;
@import "../node_modules/materialize-css/sass/materialize";

但这是显示

{
  "status": 1,
  "file": "D:/SK/Study/MaterializeCSSDemo/node_modules/materialize-css/sass/components/_variables.scss",
  "line": 39,
  "column": 23,
  "message": "argument `$color` …

我有一个容器，它有一个表和一个div，display设置为flexwithflex-direction作为column.

我想对齐 div 中心水平对齐。这是代码

<style>
    .container {
        display: flex;
        flex-direction: column;
        border: 1px solid red;
    }

    .mytable {
        width: 100%
    }

    table,
    th,
    td {
        border: 1px solid black;
    }

    .container2 {
        margin: 2.5em 0 0;
        display: flex;
        max-width: 30%;
        text-align: center;
    }

    .question {
        padding: 5px 20px;
        line-height: 20px;
        font-size: 14px;
        min-width: 50%;
        background-color: green;
        border: 1px solid rgba(27, 31, 35, 0.2);
        border-top-left-radius: 18px;
        border-bottom-left-radius: 18px;
        color: …

我有一个登录表单，浏览器已为其保存了用户登录详细信息。所以当我在浏览器中打开此页面时，它会显示如下

但是当我点击页面或按任何按钮时

这是预期的默认行为。

我努力了

document.body.focus()

onload但这不起作用。

然后我将焦点集中在其中一个输入（名称）上，但其他字段呢？对此最好的解决方案是什么？

我知道这种花哨的样式不好，但是有解决方法吗？

我有两个这样的组件:

@Component({
    selector: 'comp1',
    template: `<h1>{{ custom_text }}</h2>`
})
export class Comp1 {
    custom_text:string;
    constructor(text:string) {
        this.custom_text = text;
    }
}

/*********************************************/

@Component({
    selector: 'comp2',
    directives: [Comp1],
    template: `
    <b>Comp 2</b>
    <comp1></comp1>
    `
})
export class Comp2 {
    constructor() {
        // ...
        // How to send my own text to comp1 from comp2
        // ...
    }
}

是否有可能从把我自己的文字comp1来comp2？

是否可以从中获取comp1实例comp2？

谢谢.