我查看了几个相关的帖子和文档,但仍然无法从@ViewChild获得预期的行为.
最终,我正在尝试设置div的滚动位置.此元素不是组件,而是HTML中的普通div.
为了实现这一点,我试图使用@ViewChild来获取我需要的DOM元素,并设置其滚动值.(顺便说一句,如果你知道一个更好的方法来实现这个没有@ViewChild(或jQuery),将非常感谢答案!)
目前,@ ViewChild只返回undefined.经历一些虚拟检查: - 我在AfterViewInit中访问我的元素 - 我没有任何其他指令,如*ngIf或*ngFor在这个元素上.
这是控制器:
import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'portfolio-page',
templateUrl: './portfolio-page.component.html',
styleUrls: ['./portfolio-page.component.scss']
})
export class PortfolioPageComponent implements AfterViewInit{
@ViewChild('gallery-container') galleryContainer: ElementRef;
ngAfterViewInit(){
console.log('My element: ' + this.galleryContainer);
}
}
Run Code Online (Sandbox Code Playgroud)
和模板:
<div id='gallery-container' class='gallery-image-container'>
<div class='gallery-padding'></div>
<img class='gallery-image' src='{{ coverPhotoVm }}' />
<img class='gallery-image' src='{{ imagepath }}' *ngFor='let imagepath of imagesVm' />
</div>
Run Code Online (Sandbox Code Playgroud)
我的输出很简单:我的元素:未定义.
如您所见,我目前正在尝试按ID访问元素,但也尝试过类名.任何人都可以提供有关ViewChild选择器查询期望的更多详细信息吗?
我还看到了一个示例,其中散列'#'用作@ViewChild使用的选择器标识符 - 但是这会导致我使用#gallery-container导致模板解析错误.
我想不出任何可能在这里错误的事情.感谢所有帮助,谢谢!
完整代码可在此处获取:https://github.com/aconfee/KimbyArting/tree/master/client/KimbyArting/components/portfolio-page
我正在尝试手动启动我的Ruby on Rails应用程序,但遇到了问题.
当运行'sudo start puma-manager'或'sudo start puma app =/home //'时,我收到以下错误:'无法连接到Upstart:无法连接到socket/com/ubuntu/upstart:连接被拒绝".
我正在阅读本教程:https://www.digitalocean.com/community/tutorials/how-to-deploy-a-rails-app-with-puma-and-nginx-on-ubuntu-14-04,在Ubuntu 16.04上(没有其他惊喜,除了使用16.04我已经按照本教程的最后细节).是否有一个很好的方法让新手上班?
我刚才读到16.04没有新贵.真的吗?我发现很难相信美洲狮没有一个好的解决方法.这似乎太常见了.
谢谢你的帮助!
我想在屏幕/视口宽度超过900px时隐藏图像.出于某种原因,这不是一个非常基本的例子.
我的页脚有一个非常简单的组件 - 它是功能性的,没有状态或方法,它只嵌套在Main组件下.
我在组件中包含了页脚的样式,因此它已完全本地化.出于某种原因,在这个最基本的例子中,@ media似乎不起作用.
当我打开Chrome devtools时,我确实看到媒体查询在适当的断点处附加到我的元素,但即使我的屏幕宽度超过900px,也没有应用样式.在我的媒体查询中声明的样式被划掉.所以我的元素是选择保持原始样式并出于某种原因阻止媒体查询.如果我在媒体查询中添加原始类中尚未存在的样式,则会应用该样式.
我在index.html中包含以下内容
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
Run Code Online (Sandbox Code Playgroud)
我也在使用React Router(如果这有任何区别).
React是否阻止媒体查询工作?我在某个地方犯了一个非常愚蠢的错误吗?
这是我的组件 - 具有className'logo'的div是我正在尝试切换的内容:
import React from 'react';
import { Link } from 'react-router-dom';
import './footer.component.css';
function Footer(props) {
return (
<div className="footer">
<span className="column">
<div className="social-column-container">
<img className="logo" src="./images/logo.jpg" alt="kimbyarting logo" title="kimbyarting logo" />
<div className="social-icon-container">
<div className="social-icon"></div>
<div className="social-icon"></div>
<div className="social-icon"></div>
<div className="social-icon"></div>
<div className="social-icon"></div>
</div>
</div>
</span>
</div>
);
}
export default Footer;
Run Code Online (Sandbox Code Playgroud)
这是相关的CSS:
/* Small desktop */
@media only screen …Run Code Online (Sandbox Code Playgroud)