<a>
elements to the Markdown with a custom data
attribute, and render these as HTML at runtime. We will then query the DOM for the generated HTML, and replace any native <a>
elements that contain our custom data attribute with Angular components, the templates of which will contain <a>
elements with routerLink
directivesAngular Component Template
routerLink
attribute in the Markdown would have no effect as the generated HTML is just formatted text which is outside the Angular framework. The routerLink
attributes would have no functionality. Clicking on such a link would refresh the page and reload the application. We need to generate the anchor elements as Angular components with templates, so the routerLink
directives are instantiated and navigation is handled by the Router
markdown.md
data-routerlink
attribute, and will process it at a later stage after the markdown has been rendered as HTML[I'm an inline-style link](https://www.google.com)
Twobirds bridesmaids.marked.js
run the following commandsmarked.js
will be bound to an element's innerHTML
property in the page's template:innerHTML
property is trusted:<div>
creates the following elements:<a>
elements with Angular components <a>
elements in the DOManchor.component.ts
AnchorComponent
will not be used directly in a template
i.e. declared to be a required component ahead of time, Angular will ignore it during the build/AOT compilation and tree-shaking phase, and no associated ComponentFactory
will be available to generate the component dynamically. For dynamic components wee add the AnchorComponent
to the entryComponents
array of the containing NgModule[data-routerlink]
. The attribute values will be used as inputs for the AnchorComponent
. We will use a service to dynamically create the Angular componentsAnchorComponent
instances, and replace the current HTML elements with our dynamically generated components native elements. The inputs of the generated components will be initialized, and detectChanges()
will be called to check and update the component templates @ViewChild()
decorator. The process is detailed in the functions below..home-page.component.ts
ViewContainerRef
. I commented out the replace lines of code so we can see what the default behaviour would look like. Here the ViewContainerRef is div.render-div
. The two <bc-anchor>
components we added are immediatlely below the closing </div>
tag. You can also see the <a
data-routerlink='.'>
elements we want to replace forEach
loop, the existing anchor elements are replaced with the Angular components hostView elements. If you inspect the image below, you can see that the <bc-anchor>
elements are no longer siblings of the div.render-div
, but have now been inserted where the <a
data-routerlink='.'>
elements were previouslyViewContainerRef
createComponent()
function, the generated component's ngOnDestroy()
lifecycle hook will be invoked when the containing view is being destroyed. There is one caveat with this: if the created components are part of a page/route that is being reused, they will remain in memory and possibly remain visible in the DOM (depending on where the elements were placed). Further dynamic components will be appended to the ViewContainerRef along with the existing ones. To get around this, we clear the ViewContainerRef each time the page is reusedscript karma | Rating 108/67, Downloaded by 9933 | Comments, bugs, improvements | Vim wiki |
created by |
Ben Williams |
script type |
syntax |
description |
A syntax file for the Markdown text-to-HTML tool http://daringfireball.net/projects/markdown/ The latest version and installation details are available on Github at http://github.com/plasticboy/vim-markdown/ Please submit patches there. |
install details |
package | script version | date | Vim version | user | release notes |
---|---|---|---|---|---|
Ben Williams | Numerous link and emphasis fixes. | ||||
Ben Williams | Really fix matching bold and underline characters inside of words. | ||||
Ben Williams | Fixes several bugs, most thanks to David Wolever: * Don’t match bold and underline characters inside of words. * Don’t match code blocks that aren’t preceded by a blank line. * Fix double back-tick code blocks without a back-tick inside of them. * Fix # headings being matched anywhere in the line. * Match <pre> and <code> tags. | ||||
Ben Williams | Enables spellchecking in Vim 7 and adds highlighting for reference-style links thanks to Will Norris. | ||||
Ben Williams | Fixes numbered headings being highlighted as list items and horizontal rules being highlighted as headings. Thanks to Stephen Haberman. | ||||
Ben Williams | Fixes stuff in parentheses being highlighted when not part of a link structure. | ||||
Ben Williams | Fixes a problem with indented lists being highlighted as code blocks. | ||||
Ben Williams | Initial upload |